javascript - jquery form validation to prevent submission -
i have been trying use jquery validate form have been running issues.the link below please take look.
<!doctype html> <html lang="en-ca" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="mystyle3.css"> <meta charset='utf-8'> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//code.jquery.com/jquery-1.10.1.js"></script> <script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script> <script src='https://www.google.com/recaptcha/api.js'></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { $( "#inputform" ).validate({ rules: { fname: { required: true, minlength: 2, maxlength: 20, alphanumeric: true, }, lname: { required: true, minlength: 2, maxlength: 20, alphanumeric: true, }, street: { required: true, minlength: 4, street: true, }, city: { required: true, minlength: 4, }, birthdate: { required: true, date: true, }, zip: { required: true, minlength: 4, maxlength: 5, digits: true, zip: true }, tel: { required: true, minlength: 10, tele: true, }, birthdate:{ required: true, check_date_of_birth: true }, email: { required: true, email: true }, }, messages: { } }); $.validator.addmethod("alphanumeric", function(value, element) { return /^[a-za-z\d=#$%@_ -]+$/.test(value); }, "sorry, no special characters allowed"); }); $.validator.addmethod('zip', function (value) { return /^((\d{5}-\d{4})|(\d{5})|([a-z]\d[a-z]\s\d[a-z]\d))$/.test(value); }, 'please enter valid zip code.'); $.validator.addmethod('street', function (value) { return /^[a-za-z0-9-\/] ?([a-za-z0-9-\/]|[a-za-z0-9-\/] )*[a-za-z0-9-\/]$/.test(value); }, 'please enter valid street address.'); $.validator.addmethod('city', function (value) { return /^[a-za-z] ?([a-za-z]|[a-za-z] )*[a-za-z]$/.test(value); }, 'please enter valid city.'); $.validator.addmethod('tele', function (value) { return /^(([2-9]{1}[0-9]{2}) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/.test(value); }, 'please enter valid telephone number.'); </script> <script type="text/javascript"> $(document).ready(function(){ var d = new date(); var curr_year = d.getfullyear(); $("#txtdate").datepicker({ yearrange: '1900:'+ curr_year, changemonth:true, changeyear:true, maxdate: '-1d' }); }); </script> <title>assignment 3 input form</title> </head> <body> <div id='cssmenu'> <ul> <li><a href="http://www.jkozla.com/default.htm"><span>home</span></a></li> <li class='active has-sub'><a href='#'><span>assignments</span></a> <ul> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment1.htm><span>assignment 1</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment2.htm><span>assignment 2</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment3.html><span>assignment 3</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment4.htm><span>assignment 4</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment5.htm><span>assignment 5</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment6.htm><span>assignment 6</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment7.htm><span>assignment 7</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment8.htm><span>assignment 8</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment9.htm><span>assignment 9</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment10.htm><span>assignment 10</span></a> </li> <li class='has-sub'><a href=http://www.jkozla.com/assignment/assignment11.htm><span>assignment 11</span></a> </li> </ul> </li> <li class='active has-sub'><a href="#"><span>classes</span></a> <ul> <li class='has-sub'><a href="https://cop4813eaglin.pbworks.com/w/page/34415594/frontpage"><span>cop4813</span></a> </li> <li class='has-sub'><a href="https://cas.fsu.edu/cas/login?service=https%3a%2f%2fcampus.fsu.edu%2fwebapps%2fbb-auth-provider-cas-bb_bb60%2fexecute%2fcaslogin%3fcmd%3dlogin%26authproviderid%3d_105_1%26redirecturl%3dhttps%253a%252f%252fcampus.fsu.edu%252fwebapps%252fportal%252fframeset.jsp%26sessionidforlogout%3deb7d8a9edee7ca79b83ca34e8c9fa206"><span>mad2104</span></a> </li> </ul> </li> <li class='active has-sub'><a href="#"><span>project</span></a> <li class='last'><a href="mailto:jmk13c@my.fsu.edu"><span>contact</span></a> </li> </ul> </div> <h1>cop 4813 form validation</h1> <form class="form-horizontal" id="inputform" method="post" onsubmit="submithandler" action="mailto:jmk13c@my.fsu.edu" enctype="text/plain"> <?php require_once('recaptchalib.php'); $publickey = "6lcfzgwtaaaaagl09tebmh9akrjdzwubdzel0qhc"; // got signup page echo recaptcha_get_html($publickey); ?> <p> <label for="fname">first name: </label> <input name="fname" class="fname" id="fname" type="text" name="fname" size="15" /><br><br> <label for="lname">last name: </label> <input name="lname" class="required" id="lname" type="text" size="15" /><br><br> <label for="street">street address: </label> <input name="street" class="required" id="street" type="text" pattern="[a-za-z0-9\s]+" size="20" /><br><br> <label for="city">city: </label> <input name="city" class="required" id="city" type="text" pattern="[a-za-z0-9\s]+" size="15" /><br><br> <label for="state">state: </label> <select name="state" id="state" size="1"><br><br> <option value="al">alabama</option> <option value="ak">alaska</option> <option value="az">arizona</option> <option value="ar">arkansas</option> <option value="ca">california</option> <option value="co">colorado</option> <option value="ct">connecticut</option> <option value="de">delaware</option> <option value="dc">dist of columbia</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="hi">hawaii</option> <option value="id">idaho</option> <option value="il">illinois</option> <option value="in">indiana</option> <option value="ia">iowa</option> <option value="ks">kansas</option> <option value="ky">kentucky</option> <option value="la">louisiana</option> <option value="me">maine</option> <option value="md">maryland</option> <option value="ma">massachusetts</option> <option value="mi">michigan</option> <option value="mn">minnesota</option> <option value="ms">mississippi</option> <option value="mo">missouri</option> <option value="mt">montana</option> <option value="ne">nebraska</option> <option value="nv">nevada</option> <option value="nh">new hampshire</option> <option value="nj">new jersey</option> <option value="nm">new mexico</option> <option value="ny">new york</option> <option value="nc">north carolina</option> <option value="nd">north dakota</option> <option value="oh">ohio</option> <option value="ok">oklahoma</option> <option value="or">oregon</option> <option value="pa">pennsylvania</option> <option value="ri">rhode island</option> <option value="sc">south carolina</option> <option value="sd">south dakota</option> <option value="tn">tennessee</option> <option value="tx">texas</option> <option value="ut">utah</option> <option value="vt">vermont</option> <option value="va">virginia</option> <option value="wa">washington</option> <option value="wv">west virginia</option> <option value="wi">wisconsin</option> <option value="wy">wyoming</option> </select><br><br> <label for="zip">zipcode: </label> <input name="zip" class="required" id="zip" type="text" size="8" /><br><br> <label for="tel">phone number: </label> <input name="tel" class="required" id="tel" type="tel" data-mask="000 000-0000" placeholder="xxx xxx-xxxx" size="10" /><br><br> <label for="birthdate">dob: </label> <input name="birthdate" type="text" class="required" id="txtdate" placeholder="mm/dd/yyyy" size="15" /><br><br> <label for="email">email: </label> <input name="email" id="email" type="email" class="required" size="15" /><br><br> message:<br> <textarea name="comment" required rows="4" cols="50"></textarea> <br><br> <div class="g-recaptcha" data-sitekey="6lcfzgwtaaaaagl09tebmh9akrjdzwubdzel0qhc"></div> </p> <p><input name="send" type="submit" value="submit"/></p> </form> <div id="fixedfooter">copyright © jonathan kozla. rights reserved.</div> </body> </html> - i can validate point warns if conditions not met if boxes filled can still submit though wrong
- when use recapcha, site key gets included in email when submitted.
keep in mind homework has been submitted me learn need know went wrong. please help
e.preventdefault(); might help
Comments
Post a Comment