How to get this form to submit only when it should

Question

Probably an idiotic question but I find this really tricky:

I am trying to make a form submit only when it specifically should. The script below executes every time I submit any other form in my page.

How can I make it not execute, unless it is called for?

$('#nurturing_pop_up_form').validate({

rules: {
        emailaddress: {
          required: true,
          email: true
        },
        board_meeting: {
            required: {
                depends: function () {
                    return $('input[name=in_12_months]').is(':checked')==false && $('input[name=in_6_months]').is(':checked')==false
                }
            }
        }

},

submitHandler: function(form) {

    var url_remind = 'http://example.com';
    var data_remind = $('#nurturing_pop_up_form').serializeArray();

    $.ajax({
      type: "POST",
      url: url_remind,
      data: data_remind,
      success: function(){
        $('.nurturing_pop_up').fadeOut(); 
        }       
    });
}
});

Should I add something like this?

    $('#nurturing_pop_up_form').submit(function(e){
    e.preventDefault();

    $('#nurturing_pop_up_form').validate({
    rules: {
    //the rest like above

Help is very very appreciated!

Answer 1

I am trying to make a form submit only when it specifically should.

This process is handled automatically by jQuery Validate. You should not be doing anything special to force this.

The script below executes every time I submit any other form in my page.

The script "below", .validate({...}) , is simply the plugin's initialization routine. Within the code you've shown, you are only initializing ONE form with id="nurturing_pop_up_form" . Other forms on the page would be completely unaffected. Perhaps you have invalid HTML, additional instances of .validate() , other submit handlers, or some erroneous code you have not shown us.

How can I make it not execute, unless it is called for?

I think your question is based on an erroneous assumption of what's happening. .validate() is only supposed to be called ONCE on page load (DOM ready handler) to initialize the plugin on your form. The plugin then automatically captures the click, validates the data, and handles the submit.

Should I add something like this?

$('#nurturing_pop_up_form').submit(function(e){
     e.preventDefault();
     $('#nurturing_pop_up_form').validate({...

Absolutely not. You should never put .validate() within a .submit() handler for the same form. It's completely unnecessary, delays the plugin's initialization, and interferes with the built-in submit handler.

Nothing you've shown can explain how/why other forms would be affected.