CODEWITHSUNDEEP
javascriptjqueryhtml
nrofis
nrofis

Reputation: 9766

Submit form with JS do not perform basic validation

Why when I am using javascript the basic HTML inputs validation not performed?
Say the min max attributes.

Here the HTML:

<form action="#" method="get">Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    <br />
    <input type="submit" value="with HTML">
</form>
<button id="sender">with JS</button>

JS:

$("#sender").click(function (event) {
    $("form").submit();
});

And live example: http://jsfiddle.net/txP4R/2/

Upvotes: 0

Views: 63

Answers (2)

Anthony
Anthony

Reputation: 906

You need to associate the button with the form and check if the form is valid. See this jfiddle:

http://jsfiddle.net/txP4R/5/

The HTML:

<form action="#" method="get" id="form">Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    <br />
    <input type="submit" value="with HTML">
</form>
<button id="sender" form="form">with JS</button>

And the jQuery:

$("#sender").click(function (event) {
    if (("#form")[0].checkValidity()) {
        $("#form").submit();
    }
});

Edit: Good catch A. Wolff

Upvotes: 1

Slevin
Slevin

Reputation: 4222

You have to trigger the normal submit button:

$("#sender").click(function (event) {
    $('input[type="submit"]').trigger('click');
    event.preventDefault();
});

See this fiddle: http://jsfiddle.net/gopeter/txP4R/3/

Upvotes: 1

Related Questions