validate form data in JavaScript

How to validate form input fields in JavaScript, HTML & JQuery?

There are a couple of ways to validate form input fields in javascript. The first way is to use the built-in HTML5 validation attributes.

Form validation using HTML attributes

These are attributes that can be added to input elements, and they will cause the browser to perform validation checks on the input value when the form is submitted.

For example, the “required” attribute can be added to an input element to make sure that the value is not empty before the form is submitted.

<input type="text" required>
<input type="search" required>
<input type="url" required>
<input type="password" required>
<input type="number" required>

<select name="users" required="required" class="form-control">
 <option value="">-Select-</option>
 <option value="Doe">Doe</option>
</select>
The required attribute in HTML
The required attribute in HTML – Screenshot

Checkboxes

You can also use the “required” attribute with checkboxes.

<input type="checkbox" required>

Radio Buttons

The “required” attribute works with radio buttons if you specify the name attribute.

<input type="radio" required> <!-- will not work -->

<input type="radio" name="gender" required> <!-- will work -->

When you group radio buttons then make sure they must all have the same name value. This will allows you to select only one option at a time and apply required to the whole group.

<form>
 <h2>Select Gender</h2>
  <input type="radio" name="gender" value="male" required> : Male
  <input type="radio" name="gender" value="female"> : Female
  <input type="submit">
</form>

Input field (number)

In addition to “required” field the number input field has several other attributes.

For example,

  • Default Value
  • Step size
  • Max number
  • Min number
  • Allow Dicimal Values
<!-- Default Value -->
<input type="number" value="100">

<!-- Maximum allowed input -->
<input type="number" max="100">

<!-- Minimum allowed input -->
<input type="number" min="0">

<!-- Step size (can imput multiples of 10. e.g. 10, 20 30 ...) -->
<input type="number" step="10">

<!-- Allow decimal values -->
<input type="number" step="0.01">

Validate the form using JQuery Plugin

The second way to validate form input text fields is to use a javascript library such as JQuery.validate.

This library provides a set of methods that are useful to perform validation on form input values. For example, the “required” method can be used to check that an input value is not empty.

Installation via Package Managers

  • Bower: bower install jquery-validation
  • NuGetInstall-Package jQuery.Validation
  • NPMnpm i jquery-validation

You can also use the CDN link

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

Here is a simple example

<form id="inputNameForm" method="get" action="#">

  <fieldset>

      <label for="username">Name</label>
      <input id="username" name="name" minlength="3" type="text" required>
    </p>
  
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>

  </fieldset>

</form>
<script>
$("#inputNameForm").validate();
</script>

You just need to specify the HTML attribute “required”, then the plugin validates it on the basis of the attribute.

Validate the form using the JavaScript

checkbox

The checkboxes are simple to validate. The checked property returns true if the checkbox is checked, and false if it is not.

For example:

if (document.getElementById('checkbox').checked){

// the checkbox is checked

} else {

// the checkbox is not checked

}

Radio buttons

There are a few ways to validate radio buttons in JavaScript. The most common way is to check if the radio button is selected using the checked property.

You may achieve it using a simple if statement.

if(document.getElementById('radio_btn_name').checked) {   
         // radio button is selected   
} else {  
         // radio button is not selected 
}  

Text fields

To validate a text field in JavaScript, you can use the following code:

let field = document.getElementById('field_id');
if (field.value == "") {
     
     // field is empty
    alert("Please enter a value for the field");

}

This will check if the value of the field is an empty string, and if it is, it will alert a message.

Number input fields

When validating number fields in JavaScript, it is important to ensure that the data entered is of the correct type and within the correct range.

To do this, you can use the Number.isInteger() and Number.isSafeInteger() methods.

Number.isInteger() will return true if the value passed is an integer, and false if it is not. Number.isSafeInteger() will return true if the value passed is an integer and is within the safe integer range (-2^53 to 2^53).

If you need to validate a number field, you can use these methods to ensure that the data entered is valid.

let field = document.getElementById('num_field_id');
if (field.value == "") {
     // field is empty
}

// check if the value is a number
if(!/^[0-9]+$/.test(field.value)){
    // value is not a number
}

if(/^[0-9]+$/.test(field.value)){
    // value is a number
}

Add comment