以HTML5格式在JavaScript中显示错误

我有一个包含必填字段的HTML5表单：

    Check  

另外，我有以下jQuery代码：

 $('#my_button').on('click', function() { if ($('#my_form').checkValidity() == false) { //show errors } }); 

我想在//show errors行中强制显示HTML5错误。

Answer 1

如果要显示validation气泡，首先应提交表单。 更改要submit的button类型并收听submit事件。

另请注意，jQuery没有checkValidity方法，您应该首先获取原始DOM元素：

 // on submit event browser will validate the form and show the bubbles $('#my_form').on('submit', function() { if (this.checkValidity() == false) { return false; } // ... }); 

http://jsfiddle.net/m5duh44x/

Answer 2

如何在表单中添加提示字段并根据错误更改其HTML值？

HTML

 
 
    Check  

JS

 $('#my_button').on('click', function() { if ($('#my_form').checkValidity() == false) { $('#prompt').removeClass().addClass('error').html('your error message'); } }); 

当然，您可以使用此div来提示成功和错误消息。 要执行它，您可以创建适当的CSS样式，即

CSS

 .success { background-color:green; } .error { background-color:red; } 

并根据您的需要指定适当的类（请参阅上面的代码段）。

Answer 3

只需添加一个负责错误消息的div …

 
    Check 
 
 

// JS Part

 $('#my_button').on('click', function() { if ($('#my_form').checkValidity() == false) { //show errors in the error DIV $("#errors").empty(); $("#errors").text("error message"); } });