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.