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

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


当前回答

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

其他回答

在不使用提交按钮的情况下检查所有必须填写的字段,您可以使用下面的功能。

您必须为控件分配所需的属性。

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

也许是迟到了,但不知何故,我在试图解决类似的问题时发现了这个问题。由于该页没有代码为我工作,同时我提出了解决方案,工作如指定。

问题是,当你的<form> DOM包含单个<button>元素时,一旦触发,<button>将自动sumbit形式。如果您使用AJAX,您可能需要防止默认操作。但有一个问题:如果你只是这样做,你也会阻止基本的HTML5验证。因此,只有当表单有效时,才应该防止该按钮的默认值。否则,HTML5验证将阻止你提交。jQuery checkValidity()将帮助这:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

上面描述的代码将允许您使用基本的HTML5验证(类型和模式匹配),而无需提交表单。

根据这个问题,html5的有效性首先应该使用jQuery进行验证,在大多数答案中,这是不会发生的,原因如下:

同时使用html5表单的默认函数进行验证

checkValidity();// returns true/false

我们需要理解jQuery返回对象数组,而选择像这样

$("#myForm")

因此,您需要指定第一个索引以使checkValidity()函数工作

$('#myForm')[0].checkValidity()

以下是完整的解决方案:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}

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

例如,如果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
}