Question

In my form I have a normal submit button which validate my form with, for example, I have

$("#formTest").submit(function (e) {
        alert('test');
});

<form id="formTest">
    <input type="text"/>
    <button>Test</button>
    <input id="submitButton" type="submit" value="Save" />
</form>

But when I click on the “Test” (not the “Save” button) the alert() is displayed.
Here is a simple exemple, but in my case, jQuery validate all my input in this case.

How I can have a button with no submit effect?

Than You

Answer 1

Basically this has nothing to do with validation. This is just pure form submission. To prevent your form brom being submitted on your Test button click, you should attach a click event handler to it and cancel event’s propagation.

$("button").click(function(evt){
    evt.preventDefault();
    return false;
});

Why does this happen anyway?

The thing is that when you click your Test button, your form gets submitted because default button type (when not provided as in your case) will be submit. Check W3C Specification.

This simply means that by providing a type="button" would change this submission behaviour as well. But this depends on the problem at hand (which is clearly not the one presented in the simplified example).