Form Validation Using JavaScript

The purpose of a form validation script is to validate the user’s input data for any form.

HTML

HTML form validation can be done by JavaScript. The data entered into a form needs to be in the right format. If a form field (fname) is empty, this function alerts a message, and returns false.

<form method="post" name="contact" action="index.html" onSubmit="return ValidateForm()">
  <table border="1" cellpadding= "5" cellspacing= "1" class="table" >
    <tr>
      <td>Name:</td>
      <td><input name="name" value=""></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input name="email" value=""></td>
    </tr>
    <tr>
      <td>Mobile</td>
      <td><input name="mobile" type="text" maxlength="10" size="15" value="" ></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" name="" value="Send Enquiry" class="link" ></td>
    </tr>
  </table>
</form>

JavaScript

<script type="text/javascript">
    function clearText(field)
    {
        if (field.defaultValue == field.value) field.value = '';
        else if (field.value == '') field.value = field.defaultValue;
    }

    function echeck(str) {
    var at="@"
    var dot="."
    var lat=str.indexOf(at)
    var lstr=str.length
    var ldot=str.indexOf(dot)
    var why = "";

    if (str.indexOf(at)==-1){
       alert("Invalid E-mail ID")
       return false
    }

    if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
       alert("Invalid E-mail ID")
       return false
    }

    if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
        alert("Invalid E-mail ID")
        return false
    }

     if (str.indexOf(at,(lat+1))!=-1){
      alert("Invalid E-mail ID")
      return false
    }

     if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
        alert("Invalid E-mail ID")
        return false
    }

     if (str.indexOf(dot,(lat+2))==-1){
        alert("Invalid E-mail ID")
        return false
     }

     if (str.indexOf(" ")!=-1){
        alert("Invalid E-mail ID")
        return false
     }
     return true
  }

  //Generates the captcha function
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';
    var c = Math.ceil(Math.random() * 9)+ '';
    var d = Math.ceil(Math.random() * 9)+ '';
    var e = Math.ceil(Math.random() * 9)+ '';

    var code = a + b + c + d + e;
    document.getElementById("txtCaptcha").value = code;
    document.getElementById("txtCaptchaDiv").innerHTML = code;

  // Validate the Entered input aganist the generated security code function
  function ValidCaptcha(){
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
    var str2 = removeSpaces(document.getElementById('txtInput').value);
    if (str1 == str2){
      return true;
    }else{
      return false;
    }
  }

  // Remove the spaces from the entered and generated code
  function removeSpaces(string){
    return string.split(' ').join('');
  }

  function ValidateForm(){
  var namefield=document.contact.name
    if ((namefield.value==null)||(namefield.value=="")) {
    alert("Please Enter Your Name")
    namefield.focus()
    return false
    }

    var emailID=document.contact.email
      if ((emailID.value==null)||(emailID.value=="")){
      alert("Please Enter your Email ID")
      emailID.focus()
      return false
    }
    if (echeck(emailID.value)==false){
      emailID.value=""
      emailID.focus()
      return false
    }
      var number = document.contact.mobile

     if ((number.value==null)|| (number.value=="")){
          alert ("You didn't enter a phone number, Please enter your phone number");
          number.focus()
          return false
      }
    if(isNaN(document.contact.mobile.value)==true)
     {
      alert("Please enter the digits Alphabets are not allowed")
      document.contact.mobile.value=""
      document.contact.mobile.focus();
      return false;

        }

    var mobile=document.contact.mobile
    if ((mobile.value.length>10)){
    alert("Please enter FULL Phone no.")
    mobile.focus()
    return false
    }


    var captch = document.contact.txtInput
    if(captch.value == ""){
      alert("- Security code should not be empty.")
      captch.focus()
      return false
      }
    if(captch.value != ""){
      if(ValidCaptcha(captch.value) == false){
      alert("Security code did not match.")
      captch.value=""
      captch.focus()
      return false
      }
    }
    return true
  }
</script>

The tutorial explores JavaScript validation.

You can customize this code further as per your requirement.