javascript - jquery form validation not working after rule added -
i have added rule control. still error not showing after form validation. after click have validate input box , check empty string. if empty string show error otherwise call ajax method. error never showing.
edit:
@sparky suggested. updating post. loading input box , anchor tag after dom loaded. added validation rule companyname
control. , checking validation in <a>
click , false. still error text not showing.
html
<form action="/address/addaddress" id="frmaddress" method="post" name="frmaddress" novalidate="novalidate"> <div id="addeditaddressplaceholder> <input name="companyname" class="spe-formcontrol" id="companyname" type="text" value=""> <a href="#" class="btn btn-success" onclick="javascript: submitcompanyfind();">find company</a>
javascript
$.ajax({ url: 'addresstypeslistchange', type: "get", data: { 'addresstype': $("#addresstypeslist").val()}, cache: false, success: function(data) { $('#addeditaddressplaceholder').html(data); $("#frmaddress").validate({ errorclass: "validationerror" }); $("#companyname").rules("add", {required: true,messages: {required: "required"}}); } }); function submitcompanyfind() { $("#frmaddress").validate(); alert($("#frmaddress").valid()); // false no error showing. if ($('#companyname').val() !="") { $.ajax({ url: 'findcompanylist', type: 'post', data: $("#frmaddress").serialize(), success: function(data) { var count = object.keys(data).length; //load company table rows loadcompanylist(data); $("#hdndivcomapnyfinder").show(); }, error: function(xhr, ajaxoptions, thrownerror) { } }); } }
after page load html source looks this.
<div id="addeditaddressplaceholder"> <input name="companyname" class="spe-formcontrol input-validation-error" id="companyname" type="text" value="" aria-required="true" aria-describedby="companyname-error" aria-invalid="true"> </div>
edit: following answer op's original version of question.
the problem caused incorrectly calling .validate()
method inside of function that's triggered on click of submit button.
the .validate()
method initialization of plugin , gets called once on dom ready.
the other problem location of ajax()
. the .ajax()
belongs inside submithandler
option of .validate()
method.
$(document).ready(function() { $("#frmaddress").validate({ rules: { companyname: { required: true } }, messages: { companyname: { required: "required" } }, errorclass: "validationerror", submithandler: function(form) { // ajax function here, return false; } }); });
don't forget remove inline javascript "submit button"...
<a href="#" class="btn btn-success">find company</a>
ans since you're using anchor tag instead of real type="submit"
button
or input
, you'll need write click
handler function triggers validation programmatically calling submit...
$('#frmaddress a').on('click', function() { $('#frmaddress').submit(); });
working demo: http://jsfiddle.net/3nsapjrh/
you not need put novalidate="novalidate"
attribute within <form>
tag. plugin dynamically you.
PHP contact form with CAPTCHA and validation
ReplyDeleteFace Recognition OpenCV Source Code
PHP Send Email Using SMTP
Python parse XML with lxml library
Python program to find the frequency of each element in the array
Python OpenCV Overlaying or Blending Two Images