CODEWITHSUNDEEP
jquerystruts2jquery-validatesubmit
AndichamyGA
AndichamyGA

Reputation: 20

How to suppress Jquery Validation submitHandler when cancel button is clicked?

Here I have a problem with Jquery Validation plugin and Struts2.

I have 3 buttons like below in my form.

<td><s:submit type="button" value="Save" theme="simple" cssClass="valid" /></td>
<td><s:submit type="button" value="Cancel" theme="simple" action="cancel" cssClass="cancel"/></td>
<td><s:submit type="button" value="Submit" theme="simple" cssClass="valid"/></td>

When the form is submitted, the validations will be done using jquery validation. After the form is successfully submitted, I want user confirmation to submit the form ?

So I used submitHandler of Jquery Validate function. But When i click cancel also this submitHandler is getting executed. I dont want anything happened when cancel button is clicked. Here is the JavaScript part.

$(document).ready(function() {

    $("#MyForm").validate({
    //Some validation rules
        submitHandler: function(form) {
        //this runs when the form validated successfully
        //My code after submitting the form 
            alert("Hello");
        } //End of Submit Handler
    });

});

I know it will be a simple answer.Though Please help me find it people

Upvotes: 0

Views: 1572

Answers (1)

Sparky
Sparky

Reputation: 98758

The root problem is that your form contains three submit buttons. Even though each one has a different value, the plugin will trigger the same on each one.

1) Change the cancel button into a type="reset". The plugin will ignore this type of input (however, the HTML will clear the form data).

http://jsfiddle.net/hnyd2/

OR

2) Move the cancel button outside of the form. The layout will be different but you can place the button more precisely using CSS.

http://jsfiddle.net/hnyd2/1/

OR

3) Leave it inside the form, but block the default behavior of the submit button using jQuery's preventDefault(). You must put an id on the button so you can target it properly.

$('#cancel').click(function(e) {
    e.preventDefault();
    // anything else to do on click
});

http://jsfiddle.net/hnyd2/3/

Upvotes: 1

Related Questions