Question

我有一些文本框和一个提交按钮。我使用过HTML5'必需'验证。它的工作正常。现在我想在HTML5验证找不到任何错误时按下按钮调用一个函数。如果未提供必填字段，则单击按钮不会调用该功能。

Answer 1

您可以使用form.onsubmit处理程序。假设表单的ID为form：

var form = document.getElementById("form");
form.onsubmit = function() {
    //Pre-submission validation.

    //Return true or false based on whether the validation passed.
    //return false will prevent the submission the form.
};

Answer 2

你需要一些额外的帮助才能做到这一点，它可能是普通的javascript形式。就个人而言，我会使用jQuery来帮助您，因为它可以让您更轻松，并解决任何跨浏览器的一致性问题。无论你是否想要使用jQuery，你的选择是否合适，只是另一个对话，下面的例子只是一个演示。

这是一个使用jQuery实现验证监听功能的假设示例：

HTML

<form>
    <input type="text" class="input-text" required>
    <input type="text" class="input-text" required>
    <input type="submit" id="submit" class="input-button" disabled>
</form>

JS

$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
    var $validTextInputs = $('input.input-text:valid'),
        $submit = $('#submit');
    console.log($textInputs.length, $validTextInputs.length);
    if($textInputs.length === $validTextInputs.length){
        //all text fields are valid
        $submit.attr('disabled', null);
    } else {
        //not all text fields are valid
        $submit.attr('disabled', '');
    }
});

CSS（当输入有效时，让我们知道，视觉上）

.input-text:valid {
    background: green;
}

请参阅此处的示例：http://jsfiddle.net/m6QXc/

Answer 3

好吧，你可以尝试这个：fiddle example根据需要扩展它，但是使用了jQuery。你可以在里面添加你想要的任何东西：

 $('#exampleForm').submit(function(e){     
          e.preventDefault();     

          // here you can call your own js methods, send form with ajax? 
          // or what ever you want
      });

Answer 4

使用jquery在HTML5表单验证后触发函数

 <form id="myForm">
       <input type="text" class="input-text" required>
       <input type="submit" id="submit" class="input-button" disabled>
    </form>


    $("myForm").submit(function(){
        // Your code    
     })

在Html5验证成功后调用函数

4 个答案: