jquery - Javascript Code For HTML5 Form Validation Not Working -
i'm new javascript have no idea why code not work , validate html5 form should.
the javascript code can found below supposed check if browser supports required attribute , if doesn't validate form , check empty spaces.
i got code this website.
in body of webpage containing form have this:
below contactvalidate.js file:
$('#formtemplate').submit(function() { if (!attributesupported("required") || ($.browser.safari)) { $("#formtemplate [required]").each(function(index) { if (!$(this).val()) { alert("please fill required fields."); return false; } }); } return false; }); do need change in code or should work?
as i've said i'm new javascript guys give me appreciated.
edit :
here updated code:
$(function(){ $('#contactform').submit(function() { if (!attributesupported("required") || ($.browser.safari)) { $("#contactform [required]").each(function(index) { if (!$(this).val()) { alert("please fill in required fields."); return false; } }); } return false; }); }); function attributesupported(attribute) { return (attribute in document.createelement("input")); } the problem having is: when field empty comes alert (this fine) when fields filled in, submit button doesn't work.
i have tried changing second return false; return true; comes alert expected sends form through anyway!
edit 2:
here html5 form code:
<form id="contactform" method="post" action="php/contactform.php"> <label>name:</label> <input name="name" type="text" pattern="[a-za-z. -]+" placeholder="your name" title="you can use letters in box" required="required" data-required="true" autofocus="autofocus" /> <label>contact number:</label> <input name="phone" type="tel" pattern="[0-9. -]+" placeholder="your contact number" title="you can use numerical values in box" required="required" data-required="true" maxlength="13" /> <label>email:</label> <input name="email" type="email" placeholder="me@example.com" required="required" data-required="true"/> <label>type of enquiry:</label> <input name="enquirytype" type="text" placeholder="enquiry type" required="required" data-required="true" maxlength="20" /> <label>message:</label> <textarea name="message" placeholder="your message" required="required" data-required="true"></textarea> <br /> <br /> <input id="submit" name="submit" type="submit" value="submit" /> </form> edit 3:
the reason not working because safari 'thinks' has required attribute why checking browser rather attribute.
could adapt code check browser rather attribute?
also need in <head> tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> i put in wasn't sure if need it!
edit 4:
right, when press submit comes alert , press ok or press 'x' button sends form through anyway being blank.
also explain why have mentioned chrome in code below?
here code i'm using:
//function declaration function attributesupported(attribute) { return (attribute in document.createelement("input")); } function issafarionly() { return navigator.useragent.indexof('safari') != -1 && navigator.useragent.indexof('chrome') == -1; } //main code $(function () { $('#contactform').submit(function () { if (!attributesupported("required") || issafarionly()) { $("#contactform [required]").each(function (index) { if (!$(this).val()) { alert("please fill in required fields."); return false; } }); } return true; }); }); edit 5:
take @ jsfiddle
even when opened in safari doesn't work.
when press submit comes alert , press ok or press 'x' button sends form through anyway being blank.
please can provide fix this?
like ethan brown said, might missing attributesupported function. if case, can add code. check if attribute (in case it's "required") supported
function attributesupported(attribute) { return (attribute in document.createelement("input")); } edit:
after provided html code , more information issue able create working example @ jsfiddle. problem had $.browser.safari javascript code braiking on statement. after checking documentation found deprecated in jquery 1.9, , recommended use feature detection instead of browser detection. added issafari function , used function instead of jquery browser detection.
function issafarionly() { return navigator.useragent.indexof('safari') != -1 && navigator.useragent.indexof('chrome') == -1; } so main javascript code looks like
$(function () { $('#contactform').submit(function () { if (!attributesupported("required") || issafarionly()) { $("#contactform [required]").each(function (index) { if (!$(this).val()) { alert("please fill in required fields."); return false; } }); } return true; }); }); remember if return false function, form not submitted, why have first return false when form failed validation , don't want submit form. when form passed validation , fine, return true , form submitted url provided in action of form tag.
please notice in jsfiddle example have google address. in example have specify page address.
edit 2:
also need in <head> tag: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
yes, need it. reference jquery library (everywhere see $ in code jquery). not recommend use jquery-latest in production, because if there break change, code stop working on production. instead recommend use known , tested version. instance
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> please notice have have <script ...></script> otherwise not work.
could adapt code check browser rather attribute?
if need check safari browser use:
if (issafarionly()) { $("#contactform [required]").each(function (index) { if (!$(this).val()) { alert("please fill in required fields."); return false; } }); } edit 3:
also explain why have mentioned chrome in code below?
the reason because chrome browser has both 'chrome' , 'safari' inside of useragent, safari browser has 'safari' only. in case want identify 'safari' browser only. in order needed check useragent 'safari' exclude 'chrome', way guarantee safari browsers only.
Comments
Post a Comment