2

我有一些文本框和一个提交按钮。我已经使用了 HTML5 的“必需”验证。它工作正常。现在，当 HTML5 验证未发现任何错误时，我想在按钮单击中调用一个函数。当未提供必填字段时，单击按钮将不会调用该函数。

4

4 回答 4

4

您可以使用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.
};
于 2012-11-03T10:49:58.403 回答
1

你需要一些额外的帮助才能做到这一点，它可能是纯 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/

于 2012-11-03T10:57:33.860 回答
1

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

 <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    
     })
于 2018-03-03T14:14:02.370 回答
0

好吧，你可以试试这个：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
      });
于 2012-11-03T10:40:39.890 回答