我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。

我想在不提交表单的情况下触发验证。这可能吗?


当前回答

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

不是最好的答案,但对我来说是可行的。

其他回答

我知道这个问题已经有了答案,但我还有另一个可能的解决方案。

如果使用jquery,你可以做到这一点。

首先在jquery上创建两个扩展,这样你就可以在需要时重用它们。

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

接下来,在你想使用它的地方做一些这样的事情。

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

你可以在不提交表单的情况下完成。

例如,如果id为“search”的表单提交按钮是另一种表单。你可以在提交按钮上调用click event,然后调用ev。然后是preventDefault。 对于我的案例,我验证表单A提交的表单B。 像这样

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

我认为这是最好的方法

将使用jQuery验证插件,使用最佳实践的表单验证,它也有良好的浏览器支持。因此,您不必担心浏览器兼容性问题。

并且我们可以使用jQuery验证valid()函数来检查所选表单是否有效,或者是否所有所选元素都有效,而无需提交表单。

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

我找到了一个适合我的方法。 只需要像这样调用一个javascript函数:

action=“javascript:myFunction();”

然后是html5验证……真的很简单:-)

这里有一种更简单的方法:

像这样创建你的表单(可以是一个什么都不做的虚拟表单):

<form class="validateDontSubmit">
...

绑定所有你不想提交的表单:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

现在让我们假设你有一个<a>(在<form>内),点击你想要验证表单:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

这里有几点注意事项:

我已经注意到,你不必实际提交表单验证发生-调用checkValidity()就足够了(至少在chrome中)。如果其他人可以在其他浏览器上添加测试这个理论的评论,我会更新这个答案。 触发验证的东西不一定在<表单>中。这只是一种干净而灵活的通用解决方案。