Validation is an important and required functionality for any application. Create a simple validation form using jQuery
HTML:
<!DOCTYPE html> <html> <head> <title>Form validate</title> <link href="css/style.css" rel='stylesheet'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <h1>Get A Quote</h1> <form action='contact.php' method="POST"> <p>*Name:</p> <input id="name" type="text" name='name'> <br> <br> <p>Phone: <br> </p> <input id="phone" type="text" name="phone"> <br> <br> <p>*Email:</p> <input id="email" type="text" name="email"> <br> <br> <p>Describe your project:</p> <textarea id="project" name="message" rows="6" cols="55"></textarea> <br> <br> <br> <input class='button send' type="submit" value="Send"> </form> <h5>* Required fields</h5> </body> <script src=js/val.js></script> </html>
JS file val.js
jQuery(document).ready(function($) { $(document).on('click', '.button', function(e) { var errors = false; var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i; var numberfilter = /^[0-9-+]+$/; $(".errors").remove(); if ($("#name").val() === "") { $("#name").after("<span class='errors'> Missing Name </span> ") errors = true; } if ($("#phone").val() === "") { $("#phone").after("<span class='errors'> Missing Name </span> ") errors = true; } else if (!numberfilter.test($("#phone").val())) { $("#phone").after("<span class='errors'> Not a valid phone number </span> ") errors = true; /*validate number field has entry and is a valid*/ } if ($("#email").val() === "") { $("#email").after("<span class='errors'> Missing Email </span>") errors = true; } else if (!emailReg.test($("#email").val())) { $("#email").after("<span class='errors'> Not a valid email </span> ") errors = true; /*validate email field has entry and is a valid*/ } if (errors === true) { return false; } else { return true; } }) })