Tuesday 20 December 2011

Simple form validation in javascript

<html>
<head>

<script type="text/javascript">
function validateForm()
{
            var x=document.forms["myForm"]["fname"].value;
            if (x==null || x=="")
         {
               alert("First name must be filled out");
               return false;
          }

           var y=document.forms["myForm"]["mail"].value;
           var atpos=y.indexOf("@");
           var dotpos=y.lastIndexOf(".");
           if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
          {
                  alert("Not a valid e-mail address");
                   return false;
          }

         var z=document.forms["myForm"]["phone"].value;
   if (z==null || z=="")
   {
   alert("phone number required")
   return false;
   }
  else if(isNaN(z)||z.indexOf(" ")!=-1)
           {
              alert("Enter numeric value")
              return false;
           }
  else if (z.length<10)
           {
                alert("enter 10 characters");
                return false;
           }
  else if(z.length>10)
  {
       alert("Number exceeds 10 characters ........ please enter 10 digit number");
 return false;
           }
 
   var a=document.forms["myForm"]["subject"].value;
               if (a==null || a=="")
            {
             alert("Subject required");
             return false;
          }

   var b=document.forms["myForm"]["message"].value;
           if (b==null || b=="")
        {
           alert(" Enter your message");
           return false;
         }
}
</script>

</head>
<body>

 <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
      <table border="0" height="393" align="center" bordercolor="#CCCCCC" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">First
                          Name *</font></td>
                        <td colspan="2">
                         <input type="text" name="fname" size="30"/>
                        </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Your
                          E-mail *</font></td>
                        <td colspan="2">
                          <input type="text" name="mail" size="30" />
                        </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">City</font></td>
                        <td colspan="2">
                          <input name="city" type="text" size="30" />
                        </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">County</font></td>
                        <td colspan="2">
                          <input name="county" type="text" size="30" />
                        </td>
                      </tr>
                      <tr>
                     
          <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Phone
            * </font></td>
                        <td colspan="2">
                          <input name="phone" type="text" size="30" onkeypress="return numere(event)" onkeyup="return limitarelungime(this, 10)"  />
                        </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Subject
                          *</font></td>
                        <td colspan="2">
                          <input name="subject" type="text" size="30" />
                        </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Message
                          *</font></td>
                     
          <td colspan="2">
            <textarea name="message" onKeyUp="return limitarelungime(this, 255)"  cols="35" rows="5"></textarea>
          </td>
                      </tr>
             
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font>
                        </td>
                        <td colspan="2"> </td>
                      </tr>
                      <tr>
                        <td width="95"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
                        <td align="right" width="132">
                          <div align="left">
                            <input type="submit" name="Submit" value="Submit">
                            <input type="submit" name="Submit2" value="Cancel" onClick="this.form.reset()" >
                          </div>
                        </td>
                        <td align="right" width="70">&nbsp;</td>

                      </tr>
                    </table>
</form>

</body>

-------------------------------------------------------------------------------------------------
output:




Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)