25. Forms and Data Validation with Javascript

Forms are an essential part of any web application. They are the main interface between the user and the server, allowing users to enter data that will be sent to the server for processing. However, before submitting this data, it is crucial to ensure that it is valid. This is where data validation with Javascript comes in.

JavaScript offers several ways to validate form data before it is sent to the server. This is important because it helps ensure that the data sent to the server is accurate and complete, which can save valuable processing time and resources.

Form Validation with JavaScript

Form validation with JavaScript typically involves the use of events and functions. An event is something that happens on the page, like a click or a keypress. A function is a block of code that is executed when it is called.

For example, you can use the "onsubmit" event to call a validation function when the user tries to submit the form. This validation function can then check each form field to ensure it meets certain criteria.

Here is an example of how you can do this:

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["name"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

In the example above, the validateForm() function is called when the form is submitted. It checks if the "name" field is empty. If it is empty, it displays an alert and prevents the form from being submitted.

Data type validation

In addition to checking whether a field is empty, you may also want to check whether the data you enter is the correct type. For example, if you have a field where users must enter a number, you can use JavaScript's isNaN() function to check whether the entered value is actually a number.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="number" name="number">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["number"].value;
  if (isNaN(x)) {
    alert("Must input numbers");
    return false;
  }
}
</script>

In the example above, the validateForm() function checks whether the value entered in the "number" field is a number. If it is not a number, it displays an alert and prevents the form from being submitted.

Data format validation

You may also want to check that the data you enter is in the correct format. For example, if you have a field where users must enter an email address, you can use a regular expression to check whether the entered value looks like an email address.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid email address");
    return false;
  }
}
</script>

In the example above, the validateForm() function checks whether the value entered in the "email" field looks like an email address. If it doesn't look like an email address, it displays an alert and prevents the form from being submitted.

These are just a few examples of how you can use JavaScript to validate form data. Data validation is a crucial part of web application development, and JavaScript offers many powerful tools to help you do it effectively.

Next page of the Free Ebook:

76Introduction to jQuery

3 minutes