如何在輸入變更時顯示HTML5驗證信息？

我有一個表單，我不想提交，因爲我做了一個AJAX調用，但是我希望在輸入爲空時顯示html5驗證消息。如何在輸入變更時顯示HTML5驗證信息？

我設法顯示消息，當一個按鈕被點擊，但我真正想要的是顯示它在輸入變化。

這工作：

$('#link').click(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
});

但不是這樣的：

$('#input').change(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
});

在這裏看到現場演示：http://jsfiddle.net/1anyLswt/2/

如果空場，然後點擊「測試」，消息顯示：OK。

如果您清空該字段，然後按回車，則顯示消息：OK。

但是，如果您清空字段，然後單擊其他地方，消息不顯示：KO。

感謝您的幫助。

來源

2014-09-29 Thomas Lulé

，而不是$（ '＃輸入'）。改變使用$（ '＃輸入'）。模糊 – herr 2014-09-29 10:02:01

試試我FIDDLE

$('#input').keyup(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
});

來源

2014-09-29 10:00:46

downvoter ...評論請 – 2014-09-29 10:47:02

它爲我的情況做得非常好，謝謝 – 2014-09-29 11:35:34

Pleasure @ThomasLulé!!快樂編碼 – 2014-09-29 11:36:57

。利用jquery.validate

<script src="js/jquery.validate.js"></script> 
<script src="js/additional-methods.js"></script> 

    <script type="text/javascript"> 
    // When the document is ready 
    $(document).ready(function() 
    { 

     $("#form").validate({ 
      rules: 
      { 
       name: "test", 

       test: 
       { 
        required: true, 
        number: true 
       } 
      }, 
      messages: 
      { 
       test: "Enter Number", 

      }, 
     //perform an AJAX post to ajax.php 
     }); 
     $("#form").submit(function(e) 
     { 
      var testval = $("#form"); 
      if($("#ajaxform").valid()) 
      { 
        // Do Processing here 
      } 

     }); 
    }); 
    </script>

來源

2014-09-29 09:50:58

謝謝你，但我必須顯示原生html5驗證信息，以與應用程序的其他部分保持一致 – 2014-09-29 11:36:52

-1

的有沒有這樣的方法（據我所知），你可以用它來檢查該字段爲空或不是，要做到這一點，你可以使用組合方法或可以使用外部插件

類似的插件是jQuery驗證

把參考，並添加以下到腳本後

jQuery.validator.setDefaults({ 
debug: true, 
success: "valid" 
}); 
var form = $("#myform"); 
form.validate(); 
$("button").click(function() { 
alert("Valid: " + form.valid()); 
});

上述代碼驗證了表單中的整個控件。請參考此鏈接

Jquery Validation

來源

2014-09-29 09:54:43

如何在輸入變更時顯示HTML5驗證信息？

回答

相關問題