当按钮在表单标签之外时，jQuery表单无法验证

Question

I can't seem to get my form to validate when the button is outside the <form></form> tag. Any ideas how I can achieve this? I can't place it inside the form for technical reasons (it's inside a sticky navbar).

My HTML markup:

<form id="frm-shipping" class="frm-shipping" method="post">

  <input type="text" name="contact_phone"  class="has_validation" 
  placeholder="Contact phone" value="" data-validation="required" 
  data-validation-error-msg="this field is mandatory!" >

  <input type="text" name="first_name"  class="has_validation" 
  placeholder="First Name" value="" data-validation="required" 
  data-validation-error-msg="this field is mandatory!" >

</form>

<button class="btn" onclick="nextStep();">Next</button>

And the jQuery code:

function nextStep()
{   

    $.validate({    
        form : '#frm-shipping',    
        borderColorOnError:"#FF0000",
        onError : function() {      
        },      
        onSuccess : function() { 

          var params = $( "#frm-shipping").serialize(); 
          // AJAX call here

        }  
    });
}

When I click the button, nothing happens. Simply nothing :( Any suggestions?

Answer 1

You can assign the button to the form with form attribute. See W3Schools example .

<button class="btn" form="frm-shipping" onclick="nextStep();">Next</button>

 function nextStep() { $.validate({ form : '#frm-shipping', borderColorOnError:"#FF0000", onError : function() { console.log('error') }, onSuccess : function() { console.log('te3st') var params = $( "#frm-shipping").serialize(); // AJAX call here } }); } 

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> <form id="frm-shipping" class="frm-shipping" method="post"> <input type="text" name="contact_phone" class="has_validation" placeholder="Contact phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" > <input type="text" name="first_name" class="has_validation" placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" > </form> <button class="btn" form='frm-shipping' onclick="nextStep();">Next</button> 

Answer 2

Try this

$('.btn').click(function(){
        Validate method
  });