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

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

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/

Answer 2

如何在表单中添加提示字段并根据错误更改其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;
}

并根据您的需要指定合适的班级（请参阅上面的摘录）。

Answer 3

只需添加一个负责错误消息的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 Part

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

Answer 4

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

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

旨在对现有html5进行验证（该验证不会丢失并且无法正常工作），并且验证效果不止于可以捕获click事件并继续通过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');
});
});

以HTML5格式在JavaScript中显示错误

4 个答案: