How To Add Validation For Empty Input Field with JavaScript

Learn how to add form validation for empty input fields with JavaScript

Form Validation For Empty Inputs

Step 1) Add HTML:

Example

<form name="myForm" action="/action_page" onsubmit="return validateForm()" method="post" required>
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

Step 2) Add JavaScript:

If an input field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted:

Example

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