React Js Registration Form Validation
React Js Registration Form Validation
Venkat Nagaram
React Js Registration Form Validation
Html:
|
1 |
<div id="root"></div> |
Css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#register, #login { width: 300px; border: 1px solid #d6d7da; padding: 0px 15px 15px 15px; border-radius: 5px; font-family: arial; line-height: 16px; color: #333333; font-size: 14px; background: #ffffff; margin: 100px auto; } form label, form input { display: block; //margin-bottom: 10px; width: 90% } form input { padding: 10px; border: solid 1px #BDC7D8; } .button { background-color: #00BFFF; border-color: #3ac162; font-weight: bold; padding: 12px 15px; color: #ffffff; } .errorMsg { color: #cc0000; margin-bottom: 12px; } .sucessMsg { color: #6B8E23; margin-bottom: 10px; } |
Js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
class RegisterForm extends React.Component { constructor() { super(); this.state = { fields: {}, errors: {} } this.handleChange = this.handleChange.bind(this); this.submituserRegistrationForm = this.submituserRegistrationForm.bind(this); }; handleChange(e) { let fields = this.state.fields; fields[e.target.name] = e.target.value; this.setState({ fields }); } submituserRegistrationForm(e) { console.log(this.validateForm()); e.preventDefault(); if (this.validateForm()) { console.log(this.state); // let fields = {}; // fields["username"] = ""; // fields["emailid"] = ""; // fields["mobileno"] = ""; // fields["password"] = ""; this.setState({fields:fields}); console.log(this.state); alert("Form submitted"); } } validateForm() { let fields = this.state.fields; let errors = {}; let formIsValid = true; if (!fields["username"]) { formIsValid = false; errors["username"] = "*Please enter your username."; } if (typeof fields["username"] !== "undefined") { if (!fields["username"].match(/^[a-zA-Z ]*$/)) { formIsValid = false; errors["username"] = "*Please enter alphabet characters only."; } } if (!fields["emailid"]) { formIsValid = false; errors["emailid"] = "*Please enter your email-ID."; } if (typeof fields["emailid"] !== "undefined") { //regular expression for email validation var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); if (!pattern.test(fields["emailid"])) { formIsValid = false; errors["emailid"] = "*Please enter valid email-ID."; } } if (!fields["mobileno"]) { formIsValid = false; errors["mobileno"] = "*Please enter your mobile no."; } if (typeof fields["mobileno"] !== "undefined") { if (!fields["mobileno"].match(/^[0-9]{10}$/)) { formIsValid = false; errors["mobileno"] = "*Please enter valid mobile no."; } } if (!fields["password"]) { formIsValid = false; errors["password"] = "*Please enter your password."; } if (typeof fields["password"] !== "undefined") { if (!fields["password"].match(/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/)) { formIsValid = false; errors["password"] = "*Please enter secure and strong password."; } } this.setState({ errors: errors }); return formIsValid; } render() { return ( <div id="main-registration-container"> <div id="register"> <h3>Registration page</h3> <form method="post" name="userRegistrationForm" onSubmit= {this.submituserRegistrationForm} > <label>Name</label> <input type="text" name="username" value={this.state.fields.username} onChange={this.handleChange} /> <div className="errorMsg">{this.state.errors.username}</div> <label>Email ID:</label> <input type="text" name="emailid" value={this.state.fields.emailid} onChange={this.handleChange} /> <div className="errorMsg">{this.state.errors.emailid}</div> <label>Mobile No:</label> <input type="text" name="mobileno" value={this.state.fields.mobileno} onChange={this.handleChange} /> <div className="errorMsg">{this.state.errors.mobileno}</div> <label>Password</label> <input type="password" name="password" value={this.state.fields.password} onChange={this.handleChange} /> <div className="errorMsg">{this.state.errors.password}</div> <input type="submit" className="button" value="Register"/> </form> </div> </div> ); } } ReactDOM.render(<RegisterForm/>, document.getElementById('root')); |
Source: https://codepen.io/chandr123/pen/BgYgPV
