JavaScript

How to Validate a Textbox in  JavaScript

Validation of the form particularly, the text field and input field plays a crucial role. When a user wants to mitigate a particular defect in the project, it is necessary to validate the accuracy and details of the data. You must know that the data you have entered in the textbox of the form is in the correct format and within the specified range. To do so, validation is required and it must be performed while filling out the form.

This write-up will explain the method for validating the textbox in JavaScript.

How to Validate Textbox Using JavaScript?

To validate the textbox in JavaScript, first of all, make a form with the help of the “<form>” element and then, utilize the following attributes to create the text field:

  • The “<input>” element creates an input field.
  • Set the input “type” to specify which type of text field you want to create e.g., “text”, or “password”.
  • value” determines the value for the input you want to set beforehand.
  • id” is utilized to specify a particular name to identify the element uniquely.
  • placeholder” attribute places the text on the input field. It will disappear when the user hits on it to enter text.
  • <label>” element is used for specifying the label for an input.
  • name” is utilized to set a name for the input field.
  • <button>” element is used to add a button in an HTML form.
  • onclick” event occurs when a user clicks on it to perform an action:
<form>
 <input type="text" value="" id="login_user" placeholder="Enter Username or Email"/>
 <input type="password" value="" id="password" placeholder="Enter Password"/>
 <br><br>
 <input type="checkbox" name="remember" id="remember" />
 <label>Save for later user</label>
 <p class="submit">
  <input type="submit" value="Login" onclick="validate();" />
  <button type="reset" value="Reset">Reset</button>
 </p>
</form>

 

It can be noticed that the form is created successfully:

For the purpose of validation, utilize the “<script>” element and the following JS code:

<script>
 function validate() {
  if (document.getElementById("login_user").value == "") {
   alert("Must enter a username");
   }
  else if (document.getElementById("password").value == "") {
   alert("Must enter the password");
   }
  }
</script>

 

In the above code block:

  • Define the “validate()” function that we have set as the value of the onclick event.
  • Fetch the textbox by using its id and perform the validation as per your requirements.
  • For example, if the text box has no value then, it will trigger a message on the screen as “Must enter a username”.
  • Similarly, get the other text box and alert a message on the screen if the password field is not filled.
  • If you leave any textbox blank, it won’t log in.

As a result, you can see that the username is entered however the password field is empty. Instead of logging in, it shows the error message:

However, it will also display an error message when the username field is not filled properly:

That’s all about validating the textbox in JavaScript.

Conclusion

To validate the textbox in JavaScript, make the textbox with the help of the “<input>” element and specify the type of the input as “text”. Set a function as the value of the “onclick” event on the button. After that, inside the “<script>” tag, define the same function and use “if/else” to set the condition. You cannot successfully fill out the form if any of the text fields are left empty. This post has stated the method for validation of the textbox in JavaScript.

About the author

Hafsa Javed