在HTML5表单中显示JavaScript错误

Question

我有一个带有必填字段的HTML5表单:

<form id="my_form">
    <input type="text" name="myfield1" required>
    <input type="text" name="myfield2" required>
    <input type="text" name="myfield3" required>
    <button type="button" id="my_button">Check</button>
</form>

另外，我有以下 jQuery 代码：

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

我希望能强制显示HTML5错误在//show errors行。

- Amparo

Answer 1

如果您想显示验证气泡，首先必须提交表单。将button的类型更改为submit并侦听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/

- Ram

---

抱歉，我不小心点了踩，而且无法撤销！啊啊啊。 - Aine

@Aine 没关系。我在想答案哪一部分是错的 :) 我会重新编辑答案，然后你可以重新投票。 - Ram

我尝试了这种方法，它完美地解决了我的问题，并让我在Google表侧边栏验证方面更进一步。唯一需要解决的问题是，当我使用有效信息点击提交按钮时，它会跳转到网页上。 - sk65plus

如果表单包含验证错误，我认为它甚至不会调用submit()方法。尝试在if语句中添加console.log('validity is false')并查看。 - Mingtao Sun

Answer 2

更新（2022）

只需在要验证的表单上使用reportValidity，它将显示错误气泡。

document.forms['myform'].reportValidity();

- Eran Betzalel

---

在我看来，如果您不需要进行自定义操作，那么这应该是答案。 - Math M.

Answer 3

我有同样的问题，当你捕获on.click事件并对其进行操作时，例如在html5验证后继续使用ajax，html5气泡不会出现。

我观察到，如果在单击事件的捕获中有任何代码（一个简单的警报），则不会显示与每个字段对应的html5验证错误（气泡）

旨在使现有的html5验证工作正常（不会丢失），并且可以捕获单击事件并继续从javascript执行操作

HTML5需要输入，其中气泡必须出现！

  <form id='form_insertar' method="post">
  <div class="modal-body">
    <div class="form-group">
      <label for="first_name">First Name</label>
      <input type="text" id="first_name" placeholder="First Name" class="form-control" maxlength="100" required />
    </div>

    <div class="form-group">
      <label for="last_name">Last Name</label>
      <input type="text" id="last_name" placeholder="Last Name" class="form-control" required />
    </div>

    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="Email Address" class="form-control" required/>
    </div>      
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="submit" id='btn_addRecord' class="btn btn-primary">Add Record</button>        
  </div>
  </form>

让它不出现的JavaScript代码：

$(document).ready(function(){
    $('#btn_addRecord').on("click", function(event){
        //event.preventDefault();
        if ($("#form_insertar")[0].checkValidity()) {
            console.log('Validado el form: Inserta los datos con ajax!');
              //addRecord();
            return true;
        }
        if (!$("#form_insertar")[0].checkValidity()) {
            console.log('No validado el form: Devolvemos false y no hacemos nada. (LAMENTABLEMENTE HAY ALGO DESCONOCIDO POR LO QUE NO SE MUESTRAN LOS BUBBLES o ERRORES)');    
            return false;
        }
        //alert('test');
    });

});

- Robert Learning

---

谢谢，我意识到这个问题的答案在你之前提供的答案中->“如果你想显示验证气泡，在提交表单之前，首先应该提交表单。将按钮类型更改为提交并侦听提交事件。” 谢谢！！ - Robert Learning

Answer 4

在表单内添加一个提示字段，根据错误更改其HTML值，这个想法怎么样？

HTML

<form id="my_form">
    <div id="prompt"></div>
    <input type="text" name="myfield1" required>
    <input type="text" name="myfield2" required>
    <input type="text" name="myfield3" required>
    <button type="button" id="my_button">Check</button>
</form>

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;
}

根据您的需求分配适当的类别（请参见上面的代码片段）。

- Giorgio

Answer 5

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

<form id="my_form">
  <input type="text" name="myfield1" required>
  <input type="text" name="myfield2" required>
  <input type="text" name="myfield3" required>
  <button type="button" id="my_button">Check</button>
</form>
<div id="errors"></div>

//JS 部分

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

- mboeckle

---

@mboeckle 抱歉，我不小心编辑了你的回答，但已经恢复到原始状态了。 - asdf_enel_hak