How to determine the validity of JavaScript form input values

This article explains how to use JavaScript to determine and check the validity of form input values.

How can I check the validity of form input values?

You can validate form input values ​​in both HTML and JavaScript.

How to validate form input values ​​in HTML

The first method is to use attributes of the form’s input element introduced in HTML5 to perform validation.

The input element has validation-related attributes such as “required”, “min”, and “max” (see table below).

By using these attributes, you can validate form input values ​​without using JavaScript. However, if you have validation that cannot be covered by HTML5 attributes alone, you should use JavaScript.

Below is a sample code that uses the “required” attribute to validate required fields in a form.

<form>
  <label for="name">Name：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email Address：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">transmission</button>
</form>

In this example, the input element with the “required” attribute will validate the presence of the input value before submitting the form. If the input value is empty, the browser will automatically display an error message.

Attributes related to input value constraints

The table below shows attributes related to input value constraints and their verification details.

The above attributes were introduced in HTML5 and are mainly used as attributes of form input tags. By using these attributes, you can validate form input values ​​without using JavaScript.

However, if you have validation that cannot be covered by HTML5 attributes alone, you should use JavaScript.

How to validate form input values ​​with JavaScript

The second method is to use JavaScript to validate form input values. Using JavaScript allows more sophisticated validation.

For example, you can validate items that cannot be validated with HTML5 attributes, such as whether a form input value is a number or matches a date format. You can also use JavaScript to control error message display and form submission.

Below is a sample code that uses JavaScript to validate whether a form input value is a number.

<form>
  <label for="number">numerical value：</label>
  <input type="text" id="number" name="number">

  <button type="submit" onclick="return validateForm()">transmission</button>
</form>

<script>
function validateForm() {
  var x = document.forms[0]["number"].value;
  if (isNaN(x)) {
    alert("Input value is not numeric");
    return false;
  }
}
</script>

This example uses JavaScript to validate whether the input value is a number. Before submitting the form, the JavaScript function “validateForm()” will be executed, and if the input value is not a number, an error message will be displayed and the form submission will be canceled.

Summary of this article

We explained how to determine and confirm the validity of form input values.

The validation approach you choose should be appropriate to your form’s requirements and functionality. For example, validating simple forms with HTML5 attributes is sufficient, but complex forms may need to be validated using JavaScript.

By validating form input values, you can prevent input errors and incorrect data submission!

When validating form input values, it is important to always validate the input values ​​on the server side as well.

Client-side input validation alone is not enough when JavaScript is disabled or a malicious attack is intentional.

By validating input values ​​on the server side, you can build more secure and reliable applications.