Popular posts

I don't exactly know how Angular 2 does validations so can't speak for that. However, I will highlight couple of approaches you can take to do form validation in React, choice between the two approaches depends on your requirements for input fields.

First- You can assign an event handler on every input which will perform checks specific to that particular input field. Say you want to restrict an input field to only 140 characters. Here's a way to do it.

var ExampleForm = React.createClass({
    // some stuff .....

    checkStatusLimit: function(e) {
        var status = e.target.value.trim();

        if(status.length >= 140){
            React.findDOMNode(this.refs.status).value = status.substr(0,140);
            e.preventDefault();
            //trigger error 
            //console.log('aah.. Status is not a story!')
        }

        // do stuff like updating state etc.
        // this.setState({status: status});
    },

    submitForm: function(e) {
        e.preventDefault();
        // Dispatch an action or make an Ajax call to server using the state.
    },

    render: function() {
        <form onSubmit={this.submitForm}>
            <input type='text' ref='status' onChange={this.checkStatusLimit} />
            <button type='submit' >Submit</button>
        </form>
    }
});

Second- In case you don't have the requirements of making customized checks you can use some library like validator which will save you from writing your regex or validations, you won't have to write a event handler for every input field but you still have to run validatons for all fields that you want to be validated before the form is submitted. Say you have two fields one where you have to check for proper email format and second for username which only allows numbers and strings.

var ExampleForm = React.createClass({
    // some stuff .....

    submitForm: function(e) {
        e.preventDefault();
        var email = React.findDOMNode(this.refs.email).value;
        var username = React.findDOMNode(this.refs.username).value;

        if(!validator.isEmail(email) || !validator.isAlphanumeric(username)){
            //return and trigger Error.
        }

        // Dispatch an action or make an Ajax call to server with email and username.
    },

    render: function() {
        <form onSubmit={this.submitForm}>
            <input type='email' ref='email' />
            <input type='text' ref='username' />
            <button type='submit' >Submit</button>
        </form>
    }
});

You can also use a combination of these two to handle validations. Hope this helps.