function hi(element,clr)
{
element.style.color=clr;
}
<h1 onmouseover="style.color='Red'" onmouseout="style.color='Blue'">
Feedback Form
<h2 onmousedown="hi(this,'Green')" onmouseup="hi(this,'Orange')">
Your views matters a lot!!!

Name

<input type="text" placeholder="Enter your name" required>


Email

<input type="email" placeholder="Enter your email" required>


Suggestions/Feedback

<input type="text" placeholder="Your views" required>


<input type="button" onclick="alert('Do you need any help? If yes, then visit www.help.com')" value="Need Help?">


<input type="submit" value="Submit">


<input type="reset" value="Reset">

FORM VALIDATION
<form action="" id="myform" >
<p>
    <label for='FirstName'>First Name:</label>
    <input type="text" id="FirstName" name="FirstName" />
</p>
<p>
    <label for='LastName'>Last Name:</label>
    <input type="text" id="LastName" name="LastName" />
</p>
<p>
    <label for='EMail'>EMail:</label>
    <input type="text" id="EMail" name="EMail" />
</p>
<p>
    <label for='Phone'>Phone:</label>
    <input type="text" id="Phone" name="Phone" />
</p>
<p>
    <label for='Address'>Address:</label>
    <textarea cols="20" rows="5" id="Address" name="Address"></textarea>
</p>
<p>
    <label for='Country'>Country:</label>
    <select id="Country"  name="Country">
        <option value="000" selected="selected">[choose yours]</option>
        <option value="008">Albania</option>
        <option value="012">Algeria</option>
        <option value="016">American Samoa</option>
        <option value="020">Andorra</option>
        <option value="024">Angola</option>
        <option value="660">Anguilla</option>
        <option value="010">Antarctica</option>
        <option value="028">Antigua And Barbuda</option>
        <option value="032">Argentina</option>
        <option value="051">Armenia</option>
        <option value="533">Aruba</option>
    </select>
</p>
<p>
    <input type="submit" name="submit" value="Submit">
</p>
</form>
<script  type="text/javascript">
 var frmvalidator = new Validator("myform");
 frmvalidator.addValidation("FirstName","req","Please enter your First Name");
 frmvalidator.addValidation("FirstName","maxlen=20",
        "Max length for FirstName is 20");
 
 frmvalidator.addValidation("LastName","req");
 frmvalidator.addValidation("LastName","maxlen=20");
 
 frmvalidator.addValidation("Email","maxlen=50");
 frmvalidator.addValidation("Email","req");
 frmvalidator.addValidation("Email","email");
 
 frmvalidator.addValidation("Phone","maxlen=50");
 frmvalidator.addValidation("Phone","numeric");
 
 frmvalidator.addValidation("Address","maxlen=50");
 frmvalidator.addValidation("Country","dontselect=000");
</script>

Some Additional Notes

  • The form validators should be created only after defining the HTML form (only after the tag. )
  • Your form should have a distinguished name. If there are more than one form in the same page, you can add validators for each of them. The names of the forms and the validators should not clash.
Continue reading
    Share: