JavaScript Forms

❮ Previous Next ❯

JavaScript Form Validation

You can use JavaScript to validate HTML forms.

If the first name field (fname) is blank, this function displays a warning message and returns false to stop the form submission:

JavaScript Example

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

The action occurs when the form is submitted.

JavaScript Can Validate Numeric Input

JavaScript is commonly used to check if numeric input is valid.

Automatic HTML Form Validation

The browser can automatically perform validation for HTML forms.

If the first name field (fname) is left blank, the use of the required attribute stops the form submission.

HTML form validation doesn't function automatically on Internet Explorer 9 or earlier versions.

Data Validation

Data validation is making sure that the information users provide is clean, accurate, and helpful.

Common validation tasks include:

Did the person complete all the necessary fields?
Did the user input a correct date?
Did the user input numbers in a numeric field?

Data validation is typically done to make sure that the information entered by users is accurate.

Validation can mean checking in various ways and using different methods. It can be implemented in various ways.

The web server checks the input sent to it for errors through a process called Server-side validation.

Web browsers perform client-side validation before sending input to a web server.

HTML Constraint Validation

HTML5 brought in a fresh idea for HTML validation known as constraint validation.

HTML constraint validation relies on:

Validation Limits for HTML Input Attributes
Styling Constraints with CSS Pseudo Selectors
Working with Constraints: DOM Properties and Methods

Constraint Validation HTML Input Attributes

Attribute	Description
disabled	Indicates that the input field should be inactive or not usable.
max	Defines the highest possible value for an input element.
min	Defines the smallest acceptable value for an input element.
pattern	Defines the pattern for the value of an input field.
required	Indicates that the input box needs an element.
type	Describes the kind of an input element.

Constraint Validation CSS Pseudo Selectors

Selector	Description
:disabled	Chooses input elements that have the "disabled" attribute set.
:invalid	Chooses input elements that have incorrect values.
:optional	Choose input elements that do not have the 'required' attribute specified.
:required	Chooses input items that have the "required" feature specified.
:valid	Choose input elements with correct values.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function validateForm() {
        let x = document.forms["myForm"]["fname"].value;
        if (x == "") {
          alert("Name must be filled out");
          return false;
        }
      }
    </script>
  </head>
  <body>
    <h2>JavaScript Validation</h2>
    <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname">
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Validation</h2>
    <p>Please input a number between 1 and 10:</p>
    <input id="numb">
    <button type="button" onclick="myFunction()">Submit</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        // Get the value of the input field with id="numb"
        let x = document.getElementById("numb").value;
        // If x is Not a Number or less than one or greater than 10
        let text;
        if (isNaN(x) || x < 1 || x > 10) {
          text = "Input not valid";
        } else {
          text = "Input OK";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Validation</h2>
    <form action="/action_page.php" method="post">
      <input type="text" name="fname" required>
      <input type="submit" value="Submit">
    </form>
    <p>If you click 'submit' without filling out the text field, your browser will display an error message.</p>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics