HI WELCOME TO SIRIS

React Form Validations

Leave a Comment
Form validation is always a crucial task for any platform like for web application and mobile application, motive behind form validations is to get the expected data from the user based on the product requirement, and before uploading the user data into the server, it is necessary to check the format either it is valid or not. Form validation will be normally categories into two main categories.
  • Client side validation
  • Server-side validation
In client-side validation, the data will be validated before sending it to the server, where server-side works opposite of client-side in which data sent to server side as request and after validating data, the server sends acknowledgment as a response.
In this article, we are going to learn about basic form validation using custom validation strategies.

Required Validation

Sometimes we have the form in which all fields should be required to be filled by the end user; in this case, we can implement required validation to make end-user enter all the values of form controls before submitting the form. Many browsers support required filed validators, but it may also possible that it won’t work on some browser and can work on the specific browser, so for that, we cannot use inbuilt validator because it is browser specific required validators.

Example

If we use “required” along with input form control so it works as expected like this. Create a new file called Demo.html and paste following code.
Demo.html
    

  1.  
    2. 

  2.  <!DOCTYPE html>
    3. 

  3.  <html>
    4. 

  4.  <body>
    5. 

  5.  
    6. 

  6.  <form name="myForm" method="post">
    7. 

  7.  First Name : 
    8. 

  8.  <input required type="text" name="firstname">
    9. 

  9.  <input type="submit" value="Submit">
    10. 

  10.  </form>
    11. 

  11.  
    12. 

  12.  </body>
    13. 

  13.  </html>
    14.
Now run above file in the browser, I’m using Google Chrome and see the output.
As can see into a demo.html file, that I have not implemented any logic which handles required field validation, thus it's working as expected, it's working because JavaScript supports validation like this and keep in mind that not all browser supports required validator.

Create React App

To getting started with form validation using React application, our first required step is to create a new react app. Execute below command to install create-react-app which is a tool which provides us with a ready and simple project with the setup to get us started easily with react.
Npm install create-react-app
When we did with the installation part, now it’s time to create new react app using below npm command.
Create-react-app react-forms-validations

Implement Required Field Validation Using React

In this article, we are going to implement simple and custom validations with different types of the form element, to get started we need to create a new folder named Forms inside the src directory.And inside Forms directory, create a new file named SimpleForm.js and paste following source code.
/Src/Forms/SimpleForm.js
    

  1.  
    2. 

  2.  import React, { Component } from 'react';
    3. 

  3.  
    4. 

  4. class SimpleForm extends Component {
    5. 

  5.  
    6. 

  6.  constructor() {
    7. 

  7.  super();
    8. 

  8.  this.state = {
    9. 

  9.  formFields: {
    10. 

  10.  firstName: '',
    11. 

  11.  lastName: '',
    12. 

  12.  email: '',
    13. 

  13.  password: ''
    14. 

  14.  },
    15. 

  15.  errors: {}
    16. 

  16.  }
    17. 

  17.  this.handleChange = this.handleChange.bind(this);
    18. 

  18.  this.handleSubmit = this.handleSubmit.bind(this);
    19. 

  19.  };
    20. 

  20.  
    21. 

  21.  // When any field value changed
    22. 

  22.  handleChange(event) {
    23. 

  23.  let formFields = this.state.formFields;
    24. 

  24.  formFields[event.target.name] = event.target.value;
    25. 

  25.  this.setState({
    26. 

  26.  formFields
    27. 

  27.  });
    28. 

  28.  }
    29. 

  29.  
    30. 

  30.  // To validate all form fields
    31. 

  31.  validate() {
    32. 

  32.  let formFields = this.state.formFields;
    33. 

  33.  let errors = {};
    34. 

  34.  let IsValid = true;
    35. 

  35.  
    36. 

  36.  if (!formFields["firstName"]) {
    37. 

  37.  IsValid = false;
    38. 

  38.  errors["firstName"] = "Enter Your First Name";
    39. 

  39.  }
    40. 

  40.  
    41. 

  41.  if (!formFields["lastName"]) {
    42. 

  42.  IsValid = false;
    43. 

  43.  errors["lastName"] = "Enter Your Last Name";
    44. 

  44.  }
    45. 

  45.  
    46. 

  46.  if (!formFields["email"]) {
    47. 

  47.  IsValid = false;
    48. 

  48.  errors["email"] = "Enter Your Email";
    49. 

  49.  }
    50. 

  50.  
    51. 

  51.  if (!formFields["password"]) {
    52. 

  52.  IsValid = false;
    53. 

  53.  errors["password"] = "Enter The Password";
    54. 

  54.  }
    55. 

  55.  
    56. 

  56.  this.setState({
    57. 

  57.  errors: errors
    58. 

  58.  });
    59. 

  59.  return IsValid;
    60. 

  60.  }
    61. 

  61.  
    62. 

  62.  // When user submits the form after validation
    63. 

  63.  handleSubmit(event) {
    64. 

  64.  event.preventDefault();
    65. 

  65.  if (this.validate()) {
    66. 

  66.  let formFields = {};
    67. 

  67.  formFields["firstName"] = "";
    68. 

  68.  formFields["lastName"] = "";
    69. 

  69.  formFields["email"] = "";
    70. 

  70.  formFields["password"] = "";
    71. 

  71.  this.setState({ formFields: formFields });
    72. 

  72.  }
    73. 

  73.  }
    74. 

  74.  
    75. 

  75.  render() {
    76. 

  76.  return (
    77. 

  77.  <div className="container" style={{ width: '315px' }}>
    78. 

  78.  <h3>Employee Registration With Required Validation</h3>
    79. 

  79.  <form onSubmit={this.handleSubmit} >
    80. 

  80.  <div className="form-group">
    81. 

  81.  <label>First Name</label>
    82. 

  82.  <input className="form-control"
    83. 

  83.  type="text"
    84. 

  84.  name="firstName"
    85. 

  85.  value={this.state.formFields.firstName}
    86. 

  86.  onChange={this.handleChange} />
    87. 

  87.  {this.state.errors.firstName &&
    88. 

  88.  <div className="alert alert-danger">
    89. 

  89.  {this.state.errors.firstName}
    90. 

  90.  </div>
    91. 

  91.  }
    92. 

  92.  </div>
    93. 

  93.  <div className="form-group">
    94. 

  94.  <label>Last Name</label>
    95. 

  95.  <input className="form-control"
    96. 

  96.  type="text"
    97. 

  97.  name="lastName"
    98. 

  98.  value={this.state.formFields.lastName}
    99. 

  99.  onChange={this.handleChange} />
    100. 

  100.  {this.state.errors.lastName &&
    101. 

  101.  <div className="alert alert-danger">
    102. 

  102.  {this.state.errors.lastName}
    103. 

  103.  </div>
    104. 

  104.  }
    105. 

  105.  </div>
    106. 

  106.  <div className="form-group">
    107. 

  107.  <label>Email</label>
    108. 

  108.  <input className="form-control"
    109. 

  109.  type="text"
    110. 

  110.  name="email"
    111. 

  111.  value={this.state.formFields.email}
    112. 

  112.  onChange={this.handleChange} />
    113. 

  113.  {this.state.errors.email &&
    114. 

  114.  <div className="alert alert-danger">
    115. 

  115.  {this.state.errors.email}
    116. 

  116.  </div>
    117. 

  117.  }
    118. 

  118.  </div>
    119. 

  119.  <div className="form-group">
    120. 

  120.  <label>Password</label>
    121. 

  121.  <input className="form-control"
    122. 

  122.  type="text"
    123. 

  123.  name="password"
    124. 

  124.  value={this.state.formFields.password}
    125. 

  125.  onChange={this.handleChange} />
    126. 

  126.  {this.state.errors.password &&
    127. 

  127.  <div className="alert alert-danger">
    128. 

  128.  {this.state.errors.password}
    129. 

  129.  </div>
    130. 

  130.  }
    131. 

  131.  </div>
    132. 

  132.  <input type="submit" className="btn btn-primary" value="Submit" />
    133. 

  133.  </form>
    134. 

  134.  </div >
    135. 

  135.  );
    136. 

  136.  }
    137. 

  137. }
    138. 

  138.  
    139. 

  139. export default SimpleForm;
    140.
Let me explain all the things which I have implemented in this file.
  • Declared states with form fields to store the form element’s value
  • Created two different methods which are used to handle the form element values and another one is used to validate the user inputs before submitting the form.
  • An important method is handleSubmit, which is used to submit the form data after validating each of the form fields.
  • Inside render methods, I have created a form with different form fields with the error part, where we are going to display a different error message.
This is kind of re-usable component, In order to execute this for we need to add it into the main component App.js which is the main component for our react application.
App.js
    

  1. import React, { Component } from 'react';
    2. 

  2. import './App.css';
    3. 

  3. import SimpleForm from './Forms/SimpleForm';
    4. 

  4.  
    5. 

  5. class App extends Component {
    6. 

  6.  render() {
    7. 

  7.  return (
    8. 

  8.  <div className="App demoForm">
    9. 

  9.  <h1>React Form Validations</h1><hr style={{ borderTop: '3px solid purple' }} />
    10. 

  10.  <SimpleForm />
    11. 

  11.  </div>
    12. 

  12.  );
    13. 

  13.  }
    14. 

  14. }
    15. 

  15.  
    16. 

  16. export default App;
    17.
In this file, I have imported our SimpleForm.js file, where we have created our form and let’s see how it works.

Output

Run react application using npm command npm start and the output look like this when we directly submit our code without providing any values.
As you can see into above image that when we directly click on the submit button without providing form values then it displays the all error message like this.Now we are going to provide all the form fields values and see the output.
When we submit the form with all required fields, then we are ready to send the forms data to the server, this is how you can implement using conditions.

Implement Different custom validations

Previously, we have seen the simply required field validation using custom code, now let’s add more flavors but with the same form fields using different validation criteria.Create a new file inside Forms folder named RegistrationForm.js and paste the following source code.
/Src/Forms/RegistrationForm.js
    

  1.  import React, { Component } from 'react';
    2. 

  2.  
    3. 

  3. class RegistrationForm extends Component {
    4. 

  4.  
    5. 

  5.  constructor() {
    6. 

  6.  super();
    7. 

  7.  this.state = {
    8. 

  8.  formFields: {
    9. 

  9.  firstName: '',
    10. 

  10.  lastName: '',
    11. 

  11.  email: '',
    12. 

  12.  password: ''
    13. 

  13.  },
    14. 

  14.  errors: {}
    15. 

  15.  }
    16. 

  16.  // To bind different events
    17. 

  17.  this.handleChange = this.handleChange.bind(this);
    18. 

  18.  this.handleSubmit = this.handleSubmit.bind(this);
    19. 

  19.  };
    20. 

  20.  
    21. 

  21.  // When any field value changed
    22. 

  22.  handleChange(event) {
    23. 

  23.  let formFields = this.state.formFields;
    24. 

  24.  formFields[event.target.name] = event.target.value;
    25. 

  25.  this.setState({
    26. 

  26.  formFields
    27. 

  27.  });
    28. 

  28.  }
    29. 

  29.  
    30. 

  30.  // To validate all form fields
    31. 

  31.  validate() {
    32. 

  32.  let formFields = this.state.formFields;
    33. 

  33.  let errors = {};
    34. 

  34.  let IsValid = true;
    35. 

  35.  
    36. 

  36.  if (!formFields["firstName"]) {
    37. 

  37.  IsValid = false;
    38. 

  38.  errors["firstName"] = "Enter Your First Name";
    39. 

  39.  }
    40. 

  40.  
    41. 

  41.  // To allow only alphabets value
    42. 

  42.  if (typeof formFields["firstName"] !== "undefined") {
    43. 

  43.  if (!formFields["firstName"].match(/^[a-zA-Z ]*$/)) {
    44. 

  44.  IsValid = false;
    45. 

  45.  errors["firstName"] = "Only Alphabet Characters Are Allowed";
    46. 

  46.  }
    47. 

  47.  }
    48. 

  48.  
    49. 

  49.  if (!formFields["lastName"]) {
    50. 

  50.  IsValid = false;
    51. 

  51.  errors["lastName"] = "Enter Your Last Name";
    52. 

  52.  }
    53. 

  53.  
    54. 

  54.  // To allow only alphabets value
    55. 

  55.  if (typeof formFields["lastName"] !== "undefined") {
    56. 

  56.  if (!formFields["lastName"].match(/^[a-zA-Z ]*$/)) {
    57. 

  57.  IsValid = false;
    58. 

  58.  errors["lastName"] = "Only Alphabet Characters Are Allowed";
    59. 

  59.  }
    60. 

  60.  }
    61. 

  61.  
    62. 

  62.  if (!formFields["email"]) {
    63. 

  63.  IsValid = false;
    64. 

  64.  errors["email"] = "Enter Your Email";
    65. 

  65.  }
    66. 

  66.  
    67. 

  67.  // To allow valid email format
    68. 

  68.  if (typeof formFields["email"] !== "undefined") {
    69. 

  69.  var pattern = new RegExp(/^[a-z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)?@[a-z][a-zA-Z-0-9]*\.[a-z]+(\.[a-z]+)?$/);
    70. 

  70.  if (!pattern.test(formFields["email"])) {
    71. 

  71.  IsValid = false;
    72. 

  72.  errors["email"] = "Invalid Email";
    73. 

  73.  }
    74. 

  74.  }
    75. 

  75.  
    76. 

  76.  if (!formFields["password"]) {
    77. 

  77.  IsValid = false;
    78. 

  78.  errors["password"] = "Enter The Password";
    79. 

  79.  }
    80. 

  80.  
    81. 

  81.  // Should have valid password format
    82. 

  82.  if (typeof formFields["password"] !== "undefined") {
    83. 

  83.  if (!formFields["password"].match("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})")) {
    84. 

  84.  IsValid = false;
    85. 

  85.  errors["password"] = "Enter Valid Password";
    86. 

  86.  }
    87. 

  87.  }
    88. 

  88.  
    89. 

  89.  this.setState({
    90. 

  90.  errors: errors
    91. 

  91.  });
    92. 

  92.  return IsValid;
    93. 

  93.  }
    94. 

  94.  
    95. 

  95.  // When user submits the form after validation
    96. 

  96.  handleSubmit(event) {
    97. 

  97.  event.preventDefault();
    98. 

  98.  if (this.validate()) {
    99. 

  99.  let formFields = {};
    100. 

  100.  formFields["firstName"] = "";
    101. 

  101.  formFields["lastName"] = "";
    102. 

  102.  formFields["email"] = "";
    103. 

  103.  formFields["password"] = "";
    104. 

  104.  this.setState({ formFields: formFields });
    105. 

  105.  }
    106. 

  106.  }
    107. 

  107.  
    108. 

  108.  render() {
    109. 

  109.  return (
    110. 

  110.  <div className="container" style={{ width: '315px' }}>
    111. 

  111.  <h3>Employee Registration With Different Validations</h3>
    112. 

  112.  <form onSubmit={this.handleSubmit} >
    113. 

  113.  <div className="form-group">
    114. 

  114.  <label>First Name</label>
    115. 

  115.  <input className="form-control"
    116. 

  116.  type="text"
    117. 

  117.  name="firstName"
    118. 

  118.  value={this.state.formFields.firstName}
    119. 

  119.  onChange={this.handleChange} />
    120. 

  120.  {this.state.errors.firstName &&
    121. 

  121.  <div className="alert alert-danger">
    122. 

  122.  {this.state.errors.firstName}
    123. 

  123.  </div>
    124. 

  124.  }
    125. 

  125.  </div>
    126. 

  126.  <div className="form-group">
    127. 

  127.  <label>Last Name</label>
    128. 

  128.  <input className="form-control"
    129. 

  129.  type="text"
    130. 

  130.  name="lastName"
    131. 

  131.  value={this.state.formFields.lastName}
    132. 

  132.  onChange={this.handleChange} />
    133. 

  133.  {this.state.errors.lastName &&
    134. 

  134.  <div className="alert alert-danger">
    135. 

  135.  {this.state.errors.lastName}
    136. 

  136.  </div>
    137. 

  137.  }
    138. 

  138.  </div>
    139. 

  139.  <div className="form-group">
    140. 

  140.  <label>Email</label>
    141. 

  141.  <input className="form-control"
    142. 

  142.  type="text"
    143. 

  143.  name="email"
    144. 

  144.  value={this.state.formFields.email}
    145. 

  145.  onChange={this.handleChange} />
    146. 

  146.  {this.state.errors.email &&
    147. 

  147.  <div className="alert alert-danger">
    148. 

  148.  {this.state.errors.email}
    149. 

  149.  </div>
    150. 

  150.  }
    151. 

  151.  </div>
    152. 

  152.  <div className="form-group">
    153. 

  153.  <label>Password</label>
    154. 

  154.  <input className="form-control"
    155. 

  155.  type="text"
    156. 

  156.  name="password"
    157. 

  157.  value={this.state.formFields.password}
    158. 

  158.  onChange={this.handleChange} />
    159. 

  159.  {this.state.errors.password &&
    160. 

  160.  <div className="alert alert-danger">
    161. 

  161.  {this.state.errors.password}
    162. 

  162.  </div>
    163. 

  163.  }
    164. 

  164.  </div>
    165. 

  165.  <input type="submit" className="btn btn-primary" value="Submit" />
    166. 

  166.  </form>
    167. 

  167.  </div >
    168. 

  168.  );
    169. 

  169.  }
    170. 

  170. }
    171. 

  171.  
    172. 

  172. export default RegistrationForm;
    173.
In this form, we are going to validate different elements with different conditions.
  1. All fields are required by default
  2. The first name can not contain the characters other than alphabets
  3. The last name cannot contain the characters other than alphabets
  4. The email address should be a valid format like :
    • The first character should be lower case
    • Must contains @ symbol
    • Must have a dot(.) after the @ symbol
  5. The password should match some conditions like :
    • At least 1 Uppercase latter
    • At least 1 Lowercase latter
    • At least one special character like @#$&
    • At least 8 characters long password
So when user fulfills all the above primary requirements than the form can be submitted otherwise it won’t possible to process further without solving all remaining conditions.To run above example, we need to import it into App.js component like this.
App.js
    

  1.  
    2. 

  2. import React, { Component } from 'react';
    3. 

  3. import './App.css';
    4. 

  4. import RegistrationForm from './Forms/RegistrationForm';
    5. 

  5.  
    6. 

  6. class App extends Component {
    7. 

  7.  render() {
    8. 

  8.  return (
    9. 

  9.  <div className="App demoForm">
    10. 

  10.  <h1>React Form Validations</h1><hr style={{ borderTop: '3px solid purple' }} />
    11. 

  11.  <RegistrationForm />
    12. 

  12.  </div>
    13. 

  13.  );
    14. 

  14.  }
    15. 

  15. }
    16. 

  16.  
    17. 

  17. export default App;
    18.

Output

To demonstrate that all validations are working properly, I am going to provide invalid values to form fields like this.
In this form, I have provided invalid values against the policy, other than email address where I have provided the valid format.When I submit after providing all valid data than I will be able to submit the form successfully like this.
This is how we have implemented form validations with different conditions with required validation, but still, you can expand it as per your different requirements.
Summary
In this article, we have learned how to implement simple and custom validations using different conditions, thus we can make use of other third-party libraries to achieve the same result, if you want to try custom validation than download source code attached to this article and implement different validation like file validation, length validation, strangeness validation etc, Thanks for reading.

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.