Thursday, 18 May 2017

How to show email-id already exist message in reactJs?

how to show email-id already exist message in reactJS? I have checked email-id already exist condition in backend. but i don't understand how to show that message near textbox.I tried to show email-id already exist message in alert. Any one can help me.It is highly appreciated. here is registration form

    var RegistrationForm = React.createClass({
        //get initial state enent
        getInitialState : function(){
            return {
                strFullName : '',
                strEmail:'',
                strPassword : '',
                Fields : [],
                intPhoneNumber:''
            }
        },
        // submit function
        handleSubmit : function(e){
            e.preventDefault();
            //Validate entire form here
            var validForm = true;
            this.state.Fields.forEach(function(field){
                if (typeof field.isValid === "function") {
                    var validField = field.isValid(field.refs[field.props.name]);
                    console.log("validField "+validField);
                    validForm = validForm && validField;
                }
            });
            console.log("form"+validForm);
            //after validation complete post to server 
            if (validForm) {
                alert("ok");
             //pass data to server   
            axios.post("/register",
              {
                  full_name :this.state.strFullName,
                  email:this.state.strEmail,
                  password:this.state.strPassword,
                  phone_number:this.state.intPhoneNumber,

              }).then(function (response) {
                var data=response.data;
                alert("Email already exist");
              });
            }

             this.setState({
                 strFullName:'',
                 strEmail:'',
                 intPhoneNumber:'',
                 strPassword:''
              })

        },
render : function(){
        //Render form 
        return(
<MyInput type={'email'} 
                value={this.state.strEmail} 
                label={'Email'} 
                name={'Email'} 
                htmlFor={'Email'} 
                isrequired={true}
                onChange={this.onChangeEmail} 
                onComponentMounted={this.register} 
                strMessageRequired={'Please Enter Email.'}
                strMessageEmail={'Please Enter Correct Email'}  />
);
    }
});
module.exports=RegistrationForm;

MyInput Component is for validation. MyInput.jsx

var React = require('react');
var MyInput = React.createClass({
    //onchange event
    handleChange: function (e) {
        this.props.onChange(e.target.value);
        var isValidField = this.isValid(e.target);
    },
    //validation function
    isValid: function (input) {
if (input.getAttribute('type') == "email" && input.value != "") {
            if (!this.validateEmail(input.value)) {
                input.classList.add('error');
                input.nextSibling.textContent = this.props.strMessageEmail;
                return false;
            }
            else {
                input.classList.remove('error');
                input.nextSibling.textContent = "";
            }
        }
        return true;
    },



via Sweety

No comments:

Post a Comment