jQuery验证不起作用返回有效结果

Question

I have a html like,

<form id="create_campaign_form">
   <input type="text" name="campaign_name" id="campaign_name" >
</form>
<button id="validate_now" type="button" >OK</button>

And i have a jquery with validate.js like,

  $.fn.validate_campaign=function(options){
  $("#create_campaign_form").validate({
        rules: {
            campaign_name  : "required",
           },
        messages:{      
            campaign_name   : "Please enter Campaign name",             
              },
 submitHandler: function(form) {
            alert(1);
            return true;
        }
    });
       $('#validate_now').click(function(){
          alert($('#create_campaign_form').valid());
       });
    }

     $(document).ready(function(){
         $(this).validate_campaign(); //Invoke on document ready

      });

my problem is ,when i enter value in textbox and click the buttin alert($('#create_campaign_form').valid()); alwaise return false and does not enter submitHandler

Answer 1

check this FIDDLE

You need to submit your form. either your submit button should be inside your form or else you have to call form submit manually. The following

$('#validate_now').click(function(){
      $('#create_campaign_form').submit();
   });

enters your submit handler and alerts 1, if form is valid.

Answer 2

You need to create a submit button in the form like

<form id="create_campaign_form">
    <input type="text" name="campaign_name" id="campaign_name" />
    <input type="submit" class="button" value="Submit" id="validate_now"/>
</form>

Demo: Fiddle

or manually call the submit method in the button click

<form id="create_campaign_form">
    <input type="text" name="campaign_name" id="campaign_name" />
</form>

<input type="button" class="button" value="Submit" id="validate_now"/>

then

$('#validate_now').click(function () {
    $("#create_campaign_form").submit()
});

Demo: Fiddle

Answer 3

put your button html inside form tag

<form id="create_campaign_form">
  <input type="text" name="campaign_name" id="campaign_name" >
  <button id="validate_now" >OK</button>
</form>

By default, button with out any type is submit in html5.