使用JS提交表單不執行基本驗證

Question

為什么當我使用javascript時，基本的HTML輸入驗證沒有執行？
說最小最大屬性。

在這里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();
});

現場例子： http ： //jsfiddle.net/txP4R/2/

Answer 1

您必須觸發正常的提交按鈕：

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

看到這個小提琴： http ： //jsfiddle.net/gopeter/txP4R/3/

Answer 2

您需要將該按鈕與表單相關聯，並檢查表單是否有效。 看到這個jfiddle：

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

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>

和jQuery：

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

編輯：好抓A.沃爾夫