article

Tuesday, June 18, 2013

Form validations with Javascript and HTML5

Form validations with Javascript and HTML5


Javascript Form

<script type="text/javascript">
function send(){
if(document.dataform.tx_name.value=="" || document.dataform.tx_name.value.length < 8)
{
alert( "Insert your name with more than 8 chars!" );
document.dataform.tx_name.focus();
return false;
}
if( document.dataform.tx_email.value=="" || document.dataform.tx_email.value.indexOf('@')==-1 || document.dataform.tx_email.value.indexOf('.')==-1 )
{
alert( "Insert an valid e-mail adress!" );
document.dataform.tx_email.focus();
return false;
}
if (document.dataform.tx_message.value=="")
{
alert( "Insert your message!" );
document.dataform.tx_message.focus();
return false;
}
if (document.dataform.tx_message.value.length < 50 )
{
alert( "Is necessary to use more than 50 chars in the message field!" );
document.dataform.tx_message.focus();
return false;
}
return true;
}
</script>
<form action="#" method="post" name="dataform" onSubmit="return send();" >
  <table width="588" border="0" align="center" >
    <tr>
      <td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Name:</font></td>
      <td width="460">
        <input name="tx_name" type="text" class="formbutton" id="tx_name" size="52" maxlength="150">
      </td>
    </tr>
    <tr>
      <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
      <td><font size="2">
        <input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
      </font></td>
    </tr>
    <tr>
      <td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Message<strong>:</strong></font></font></td>
      <td rowspan="2"><font size="2">
        <textarea name="tx_message" cols="50" rows="8" class="formbutton" id="tx_message" input ></textarea>
      </font></td>
    </tr>
    <tr>
      <td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
      </font></font></strong></p></td>
    </tr>
    <tr>
      <td height="22"></td>
      <td>
        <input name="Submit" type="submit"  class="formobjects" value="Send">
  
        <input name="Reset" type="reset" class="formobjects" value="Reset">
      </td>
    </tr>
  </table>
</form>   
HTML 5 Form
<form method="post" action="">
    <label for="name">Name: </label>
    <input id="name" type=text required name=name/>
<br />
    <label for="email">Email: </label>
    <input id="email" type=text required name=email/>
<input type=submit value="OK"/>
</form> 

Related Post