Question

Have two different events happening on the click. Using jQuery and trying to bind the to the submit button to different calls. One is a call to jquery.validate, the other is a call to a get response. Both of the events are working fine, but I want them tied together. Right now, the first click does a call to the server and receiving some JSON back (there’s more code),

$("#validateButton").bind('click', function () {
  var someVariable = $("#someVariable").val();
}

 //Bind button to click
 $('#validateButton').bind('click', function () {
 //Implement Validate on this form ID
 $('#someForm').valid();
});
  //Ensure we're ready
$().ready(function () {


$("#someVariable").validate({

    rules: {
        someVariable: {
            required: true,
        },
    },

    messages: {
        accntTypeCL: {
            required: "Blah",

        },
    }
});

});

Answer 1

You do not need to bind .valid() to the click of the submit button because the form’s status is already checked automatically when the submit is clicked.

You just use .validate() to initialize the form on DOM ready. Then use its built in submitHandler: to do everything/anything else you need to do upon clicking the submit button.

$(document).ready(function() {

    $('#theForm').validate() {
        // your validation rules and plugin options,

        submitHandler: function(form) {
            // whatever code you want to run upon clicking submit
            var someVariable = $("#someVariable").val();
            form.submit();
        }
    });

});

Simple Demo:

http://jsfiddle.net/tyGNC/