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"设置为type="number" step="0.01"因为它必须采用十进制数字。

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

问题在于，以这种方式进行操作，在我看来HTML5类型验证无效，因为我可以在输入标记中插入任何类型的值。 是我还是缺少什​​么？ 验证仅在提交表单后有效吗？

如何解决此问题并验证我的输入而不提交任何表格？

Answer 1

两件事情：

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

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

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

如果验证成功或失败，则返回该行。

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

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

Answer 2

添加jquery.validate.unobtrusive.js文件。

您可以像这样使用Fire jquery函数：

$.validator.unobtrusive.parse("#frmcreateCountry");

$("#formid").on("submit",function(){

  if($(this).valid())
   {
     // server code here 
       }



       });