Client-Side Form Validation with JavaScript

In traditional web forms, validation occurred on the server after submission, leading to delays and server load. JavaScript allows for client-side form validation, checking data before it's sent to the server.

Basic Form Validation

Basic validation ensures required fields are filled and formats are correct:

<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return validate()">
  <input type="text" name="Name" />
  <input type="text" name="EMail" />
  <input type="text" name="Zip" />
  <select name="Country">
    <option value="-1" selected>[choose yours]</option>
    <option value="1">USA</option>
    <option value="2">UK</option>
    <option value="3">INDIA</option>
  </select>
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
function validate() {
  if (document.myForm.Name.value == "") {
    alert("Please provide your name!");
    document.myForm.Name.focus();
    return false;
  }
  if (document.myForm.EMail.value == "") {
    alert("Please provide your Email!");
    document.myForm.EMail.focus();
    return false;
  }
  if (document.myForm.Zip.value == "" || isNaN(document.myForm.Zip.value) || document.myForm.Zip.value.length != 5) {
    alert("Please provide a zip in the format #####.");
    document.myForm.Zip.focus();
    return false;
  }
  if (document.myForm.Country.value == "-1") {
    alert("Please provide your country!");
    return false;
  }
  return true;
}
</script>

Data Format Validation

Validate specific data formats like email addresses:

<script type="text/javascript">
function validateEmail() {
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus();
    return false;
  }
  return true;
}
</script>