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

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

我想触发验证而不提交表单。可能吗？

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

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

我找到了适合我的解决方案。只需像这样调用javascript函数即可：

action="javascript:myFunction();"

然后您就进行了html5验证...非常简单:-)

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

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

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

来自：html5表单验证

下面的代码对我有用，

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

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

});

这是一种更通用的方式，它更干净：

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

<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>。这只是获得通用解决方案的一种干净灵活的方法。

可能聚会晚了，但是在设法解决类似问题时，我却以某种方式发现了这个问题。由于此页面上没有代码适合我，因此我想出了可以按指定方式工作的解决方案。

问题是当您的<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验证（具有类型和模式匹配）。

您谈到了两种不同的情况：“ HTML5验证”和使用javascript / jquery验证HTML表单。

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

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

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

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

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

您必须将必需的属性分配给控件。

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

您不需要jQuery即可实现。在您的表单中添加：

onsubmit="return buttonSubmit(this)

或在JavaScript中：

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

在您的buttonSubmit函数（或任何您称呼的函数）中，您可以使用AJAX提交表单。buttonSubmit仅当您的表单通过HTML5验证时才会被调用。

如果这可以帮助任何人，这是我的buttonSubmit功能：

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

我的某些表单包含多个提交按钮，因此此行if (submitvalue == e.elements[i].value)。我设置submitvalue使用click事件的值。

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

其基础是它也不引人注目，因此我不能仅仅将其设置为普通按钮。但也想利用html5验证。

同样，如果用户按下回车键触发了预期的默认提交，则提交事件也将被覆盖；在此示例中保存。

这是处理表单的工作，无论是否使用javascript和html5验证，都可以使用提交事件和单击事件。

jsFiddle演示-带有提交和单击覆盖的HTML5验证

的HTML

<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

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

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

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

您可以不提交表格就完成此操作。

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

这种方式对我来说很好：

1. onSubmit在您的属性中添加属性form，不要忘记将其包含return在值中。

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

2. 定义功能。

   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").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>

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

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

这对我有效，可以显示带有表单验证的本地HTML 5错误消息。

<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');

}


});

注意： RegForm是form id。

参考

希望可以帮助某人。

这是让HTML5对任何表单执行验证的非常简单的方法，同时仍具有对表单的现代JS控制。唯一需要注意的是，提交按钮必须位于内<form>。

html

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

js

// 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...
}

我认为最好的方法

将使用jQuery Validation插件，该插件使用最佳实践进行表单验证，并且还具有良好的浏览器支持。因此，您无需担心浏览器兼容性问题。

并且，我们可以使用jQuery验证有效（）函数，它检查是否所选择的形式是有效的，或者是否所有选择的元件是没有提交表单有效。

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

根据问题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);}
        });
    }
}