jquery - 仅当我提交表单时，HTML5 表单验证才有效？

Question

我是 HTML5 的新手，我有以下疑问。

在一个页面中我有这样的情况:

<div id="inserimentoVariazioneAnticipo" class="row">
    <div class="col-md-5">
        <p style="line-height: 200%;">Inserire la variazione dell'anticipo:</p>
    </div>
    <div class="col-md-7">
        <input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="text" type="number" step="0.01" />
    </div>
</div>

<button id="confermaAnnullaTrasmissione" type="button" class="btn btn-primary">
    Conferma
</button>

如你所见，我有一个 input标签有 type="number" step="0.01"设置，因为它必须取十进制数。

如你所见，我没有 <form>标记，因为我不必提交表单，但在 confermaAnnullaTrasmissione 时我必须执行 jQuery 函数按钮被点击。

问题是，这样做，在我看来 HTML5 类型验证不起作用，因为我可以在我的输入标签中插入任何类型的值。是不是我错过了什么？验证仅在提交表单时有效？

如何在不提交任何表单的情况下解决此问题并验证我的输入？

Answer 1

两件事:

首先，从您的输入中删除 type="text"。您正在混合使用 type="text" 和 type="number"。

其次，您可以使用 HTML5 Validation API 验证所有表单或单个表单元素。

 document.getElementById('variazioneAnticipo').checkValidity(); 

无论验证是否成功，该行都会返回。

请参阅这篇关于验证 API 的有趣文章:

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation