Question

I have a form that requires some post validation warnings. The concept is simply, the values are allowed, but out of normal range. The way this is being handled is in the validation submitHandler:

$('form').validate({
    highlight: function (element, errorClass) {$(element).addClass("invalidElem");},
    unhighlight: function (element, errorClass) {$(element).removeClass("invalidElem");},
    errorPlacement: function (error, element) {element.parent().parent().next().children().last().append(error);},
    errorClass: "errorMsg",

    submitHandler: function (form) {

        if (!WeightsRangeValidator("Height", txtHeight, heightWarning)) {
            return false;
        }

        if (!WeightsRangeValidator("Weight", txtWeight, weightWarning)) {
            return false;
        }

        form.submit();
    }        
});

The problem is that there is both a submit and a cancel button on the form. The cancel button does have the class ‘cancel’ so that the validation does not execute. The submitHandler function is being called still, though. I assume there has to be a way to detect which of the submit buttons is being clicked as to bypass the contents of the submitHandler handler.

---

here is a working jsFiddler: http://jsfiddle.net/scarleton/ZSVFP/

There are three valid states of the form: either check box (but not both) or both text boxes and the drop down. The validation works when you click on OK. The problem comes in on the cancel. If you enter anything into the text box and press cancel, the validation still tries to validate. I tried added the following handler and it allows cancel if the form is valid, but not if letters are entered in the text box.

btnCancel.click(function () {
    txtHeight.rules("remove");
    txtWeight.rules("remove");
    ddlDevice.rules("remove");
    $("#form").submit();
});

Answer 1

$('.submitBtn').on('click', function(){
    var $frm =  $ ("#form");
    $frm.validate()
    if($frm).valid()){
       submitHandler();
     $frm.submit()
    }
})

$('.cancel').on('click', function(){
   var $frm =  $ ("#form");
   if($frm.valid()){
    // Do Some action ...;
   }
})

OR
You can add click events on buttonsm and each time change param according on what buttons was clikcef, for more details see example
[DEMO][1]

See jquery docs http://docs.jquery.com/Plugins/Validation%5B1%5D: http://jsfiddle.net/abaksheyev/jKuVa/1/

There are more smart way

submitHandler: function (form) {
      var val = $("input[type=submit][clicked=true]").val() // add this line to handler
  .......


//Add this into document.ready 
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});