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

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

---

我想在不提交表单的情况下触发验证。是否可能？

要检查某个字段是否有效，请使用：

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

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

要检查表单是否有效，请使用：

$('#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验证。

您提到了两件不同的事情“HTML5验证”和使用javascript/jquery验证HTML表单

HTML5“具有”用于验证表单的内置选项。例如在字段上使用“required”属性，这可能（基于浏览器实现）在不使用javascript/jquery的情况下导致表单提交失败

使用javascrip/jquery，您可以执行以下操作

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

$("#myForm")

---

我发现这个解决方案对我有效。 只需调用如下javascript函数：

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();
}

action=“javascript:myFunction（）；”

---

然后你有html5验证。。。非常简单：-）

这里有一个更通用的方法，稍微干净一点：

像这样创建表单（可以是不执行任何操作的虚拟表单）：

现在让我们假设您有一个

（在

中），单击它您就可以验证表单：

$('#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中是这样）。如果其他人可以在其他浏览器上测试这一理论并添加注释，我将更新这个答案
• 触发验证的内容不必在
  中。这只是一种简洁灵活的通用解决方案

---

要在不使用提交按钮的情况下检查表单的所有必填字段，您可以使用以下功能

function contact(params) {
    $.ajax({
        url: 'sendmail.php',
        type: "POST",
        dataType: "json",
        timeout: 5000,
        data: { params:params },
        success: function (data, textStatus, jqXHR) {
            // callback
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
        }
    });

    return false;
}

您必须将required属性指定给控件

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

---

我有一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如，保存和删除

其基础是，它也不引人注目，所以我不能只是使它成为一个正常的按钮。但也希望利用html5验证

此外，如果用户按enter键触发预期的默认提交，则会覆盖提交事件；在本例中，保存

下面是表单处理的工作，它仍然可以使用/不使用javascript和html5验证，以及提交和单击事件

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

使用Javascript需要注意的是，浏览器的默认onclick必须传播到submit事件，以便在代码中不支持每个浏览器的情况下显示错误消息。 否则，如果单击事件被event.preventDefault（）覆盖或返回false，它将永远不会传播到浏览器的提交事件

---

需要指出的是，在某些浏览器中，当用户按enter键时，不会触发表单提交，而是会触发表单中的第一个提交按钮。因此，有一个console.log（'form submit'）来表明它不会触发。

您可以在不提交表单的情况下执行此操作

<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>

例如，如果id为“search”的表单提交按钮位于另一个表单中。您可以在提交按钮上调用click事件，然后调用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
}

这不是最好的答案，但对我来说很有用

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

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

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

---

发件人：

我知道这已经得到了回答，但我有另一个可能的解决方案

如果使用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>

/*如果要在提交调用中验证表单，
您永远不希望表单通过
正常的提交操作，或者您希望处理它。
*/
$（函数（）{
$.DefaultSubmit（'form1'，submit'）；
});
函数submit（）{
//做点什么，或者什么都不做，如果你只是想验证的话
}

实现这一点不需要jQuery。在表格中添加：

onsubmit="return buttonSubmit(this)

或在JavaScript中：

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

在您的

按钮submit

函数（或您如何称呼它）中，您可以使用AJAX提交表单<代码>按钮提交仅在您的表单在HTML5中经过验证时才会被调用

如果这对任何人都有帮助，下面是我的

按钮submit

函数：

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

功能按钮提交（e）
{
var-ajax；
var formData=new formData（）；
对于（i=0；i

---

我的一些表单包含多个提交按钮，因此这一行

if（submitvalue==e.elements[i].value）

。我使用单击事件设置了

submitvalue

的值。

可能会迟到，但还没有

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

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

<form id='frm-contact' method='POST' action='' onSubmit="return contact()">

function contact(params) {
    $.ajax({
        url: 'sendmail.php',
        type: "POST",
        dataType: "json",
        timeout: 5000,
        data: { params:params },
        success: function (data, textStatus, jqXHR) {
            // callback
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
        }
    });

    return false;
}

<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>

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

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

});

checkValidity();// returns true/false

$("#myForm")

$('#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);}
        });
    }
}