Social Icons

banner image
Home / ONMOUSECLICK AND VALIDATION FORM / ONMOUSECLICK AND VALIDATION FORM

ONMOUSECLICK AND VALIDATION FORM

<!DOCTYPE html>
<html>
<head>
<script>
function hi(element,clr)
{
element.style.color=clr;
}
</script>
</head>
<body>
<h1 onmouseover="style.color='Red'" onmouseout="style.color='Blue'">
<center>
Feedback Form
</center>
</h1>
<h2 onmousedown="hi(this,'Green')" onmouseup="hi(this,'Orange')">
<center>
Your views matters a lot!!!
</center>
</h2>
<p>
<center>
<form>
Name
<br>
<input type="text" placeholder="Enter your name" required>
</input>
<br><br>
Email
<br>
<input type="email" placeholder="Enter your email" required>
</input>
<br><br>
Suggestions/Feedback
<br>
<input type="text" placeholder="Your views" required>
</input>
<br><br>
<input type="button" onclick="alert('Do you need any help? If yes, then visit www.help.com')" value="Need Help?">
</input>
<br><br>
<input type="submit" value="Submit">
</input>
<br><br>
<input type="reset" value="Reset">
</input>
</body>
</html>
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 </form> 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.
ONMOUSECLICK AND VALIDATION FORM ONMOUSECLICK AND VALIDATION FORM Reviewed by Shobhit Goel on December 02, 2015 Rating: 5

You May Also Like

No comments:

Post a Comment

Subscribe to: Post Comments ( Atom )
  • heap in data structure
    Example of a  complete binary  max-heap with node keys being integers from 1 to 100 In  computer science , a  heap  is a specia...
  • queqe
    Queue Data Structures Queue is also an abstract data type or a linear data structure, in which the first element is inserted from one e...

Airtel Hackaton 2017

Powered by Blogger.