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