如何在不通过jQuery提交的情况下强制执行html5表单验证

Question

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

我想在不提交表单的情况下触发验证.可能吗？

Answer 1

要检查某个字段是否有效,请使用:

$('#myField')[0].checkValidity(); // returns true/false

要检查表单是否有效,请使用:

$('#myForm')[0].checkValidity(); // returns true/false

如果您想显示某些浏览器具有的本机错误消息(例如Chrome),遗憾的是,唯一的方法是提交表单,如下所示:

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

希望这可以帮助.请记住,并非所有浏览器都支持HTML5验证.

Answer 2

我发现这个解决方案适合我.只需调用这样的javascript函数:

action="javascript:myFunction();"

然后你有html5验证......真的很简单:-)

Answer 3

现代原生 JS 解决方案

纯 JavaScript 具有您所需的所有功能。相关函数是checkValidity()和reportValidity()。

测试整个表格

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

测试特定领域

checkValidity()并且reportValidity()不仅可以用在表单上，​​还可以用在特定字段上。如果不需要，无需创建表单或虚拟提交按钮。

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

显然，这必须在事件侦听器调用的函数中才有意义。

Answer 4

这是一种更通用的方式,有点清洁:

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

<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中).如果其他人可以在其他浏览器上添加测试这个理论的评论,我会更新这个答案.
• 触发验证的事情不一定要在<form>.这只是一种干净灵活的通用解决方案.

Answer 5

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

from:html5表单验证

Answer 6

可能迟到了派对,但不知怎的,我在试图解决类似的问题时发现了这个问题.由于此页面的代码没有为我工作,同时我提出了按指定的方式工作的解决方案.

问题是当你的<form>DOM包含单个<button>元素时,一旦触发,<button>它将自动汇总表单.如果您使用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验证(具有类型和模式匹配)而无需提交表单.

Answer 7

你说两个不同的东西"HTML5验证"和使用javascript/jquery验证HTML表单.

HTML5"具有"用于验证表单的内置选项.比如在字段上使用"required"属性,这可能(基于浏览器实现)失败表单提交而不使用javascript/jquery.

使用javascrip/jquery,你可以做这样的事情

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

Answer 8

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

Answer 9

下面的代码对我有用，

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});