blocks|key|2138484|text|要检查某个字段是否有效，请使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2138485|$('#myField')[0].checkValidity();+//+returns+true%7Cfalse|code-block|syntax|javascript|2138486|要检查表单是否有效，请使用：|2138487|$('#myForm')[0].checkValidity();+//+returns+true%7Cfalse|2138488|如果您想要显示某些浏览器(如Chrome)具有的本机错误消息，不幸的是，唯一的方法是提交表单，如下所示：|2138489|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();
}|2138490|请记住，到目前为止，并不是所有浏览器都支持HTML5验证。|2138491|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>To check whether a certain field is valid, use:</p>
<pre class="lang-js prettyprint-override"><code>$('#myField')[0].checkValidity(); // returns true|false
</code></pre>
<p>To check if the form is valid, use:</p>
<pre class="lang-js prettyprint-override"><code>$('#myForm')[0].checkValidity(); // returns true|false
</code></pre>
<p>If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:</p>
<pre class="lang-js prettyprint-override"><code>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();
}
</code></pre>
<p>Keep in mind that, HTML5 validation is not supported in all browsers till now.</p>


blocks|key|2170376|text|下面的代码适用于我，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2170377|$("#btn").click(function+()+{

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

});|code-block|syntax|javascript|2170378|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>below code works for me,</p>

<pre><code>$("#btn").click(function () {

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

});
</code></pre>


blocks|key|3895563|text|我发现这个解决方案对我很有效。只需像这样调用javascript函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3895564|action="javascript:myFunction();"|offset|length|style|CODE|3895565|然后是html5验证...非常简单:-)|3895566|entityMap^0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>I found this solution to work for me.
Just call a javascript function like this:</p>

<p><code>action="javascript:myFunction();"</code></p>

<p>Then you have the html5 validation... really simple :-)</p>


blocks|key|2170037|text|++++if+$("form")[0].checkValidity()
++++++$.ajax(
++++++++url:+"url"
++++++++type:+"post"
++++++++data:+{

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

++++++)
++++else
++++++#important
++++++$("form")[0].reportValidity()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2170038|来自：html5+form+validation+|unstyled|offset|length|2170039|entityMap|0|LINK|mutability|MUTABLE|url|http://zhishu.huati365.com/read/HTML/%25E5%259C%25A8Ajax%25E8%25AF%25B7%25E6%25B1%2582%25E4%25B8%25AD%25E4%25BD%25BF%25E7%2594%25A8HTML5%25E8%2587%25AA%25E5%25AE%259A%25E4%25B9%2589%25E9%25AA%258C%25E8%25AF%2581^0|0|3|M|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

        }
        dataType: "json"
        success: (data) -&gt;

      )
    else
      #important
      $("form")[0].reportValidity()
</code></pre>

<p>from: <a href="http://zhishu.huati365.com/read/HTML/%E5%9C%A8Ajax%E8%AF%B7%E6%B1%82%E4%B8%AD%E4%BD%BF%E7%94%A8HTML5%E8%87%AA%E5%AE%9A%E4%B9%89%E9%AA%8C%E8%AF%81" rel="noreferrer">html5 form validation </a></p>


blocks|key|3895609|text|下面是一种更通用的方法，它更简洁一些：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3895610|像这样创建表单(可以是一个不做任何事情的虚拟表单)：|3895611|<form+class="validateDontSubmit">
...|code-block|syntax|javascript|3895612|绑定所有你不想提交的表单：|3895613|$(document).on('submit','.validateDontSubmit',function+(e)+{
++++//prevent+the+form+from+doing+a+submit
++++e.preventDefault();
++++return+false;
})|3895614|现在假设您有一个<a>+(在<form>中)，单击它就可以验证表单：|offset|length|style|CODE|3895615|$('#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'
});|3895616|这里有几点注意事项：|3895617|3895618|我注意到你并不一定要提交表单才能进行验证--调用checkValidity()就足够了(至少在chrome中是这样)。如果其他人可以在其他浏览器上测试这个理论时添加评论，我会更新这个答案。|unordered-list-item|3895619|触发验证的东西不一定要在<form>中。这是一种干净灵活的通用解决方案..|3895620|3895621|entityMap^0|0|0|0|0|0|8|3|E|6|0|0|0|0|O|F|0|C|6|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1A|8|@$O|1B|P|1C|Q|R]|$O|1D|P|1E|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1I|8|@$O|1J|P|1K|Q|R]]|9|@]|A|$]]|$1|10|3|11|5|Z|7|1L|8|@$O|1M|P|1N|Q|R]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|14|$]]

<p>Here is a more general way that is a bit cleaner:</p>

<p>Create your form like this (can be a dummy form that does nothing):</p>

<pre><code>&lt;form class="validateDontSubmit"&gt;
...
</code></pre>

<p>Bind all forms that you dont really want to submit:</p>

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

<p>Now lets say you have an <code>&lt;a&gt;</code> (within the <code>&lt;form&gt;</code>) that on click you want to validate the form:</p>

<pre><code>$('#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" ) &amp;&amp; !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});
</code></pre>

<p>Few notes here:</p>

<ul>
<li>I have noticed that you don't have to actually submit the form for validation to occur - the call to <code>checkValidity()</code> is enough (at least in chrome). If others could add comments with testing this theory on other browsers I'll update this answer.</li>
<li>The thing that triggers the validation does not have to be within the <code>&lt;form&gt;</code>. This was just a clean and flexible way to have a general purpose solution..</li>
</ul>


blocks|key|3895970|text|可能来晚了，但不知何故，我在尝试解决类似问题时发现了这个问题。因为这个页面上的代码对我来说都不起作用，所以我想出了一个解决方案，可以按规定工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3895971|问题是，当您<form>+DOM包含单个<button>元素时，一旦触发，<button>将自动对表单求和。如果您使用AJAX，则可能需要防止默认操作。但是有一个问题:如果您只是这样做，您还将阻止基本的HTML5验证。因此，只有在表单有效的情况下，才能防止该按钮出现默认值。否则，HTML5验证将阻止您提交。jQuery+checkValidity()将在这方面提供帮助：|offset|length|style|CODE|3895972|jQuery：|3895973|$(document).ready(function()+{
++$('#buttonID').on('click',+function(event)+{
++++var+isvalidate+=+$("#formID")[0].checkValidity();
++++if+(isvalidate)+{
++++++event.preventDefault();
++++++//+HERE+YOU+CAN+PUT+YOUR+AJAX+CALL
++++}
++});
});|code-block|syntax|javascript|3895974|上面描述的代码允许您在不提交表单的情况下使用基本的HTML5验证(具有类型和模式匹配)。|3895975|entityMap^0|0|6|6|K|8|11|8|4H|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

<p>May be late to the party but yet somehow I found this question while trying to solve similar problem. As no code from this page worked for me, meanwhile I came up with solution that works as specified.</p>

<p>Problem is when your <code>&lt;form&gt;</code> DOM contain single <code>&lt;button&gt;</code> element, once fired, that <code>&lt;button&gt;</code> will automatically sumbit form. If you play with AJAX, You probably need to prevent default action. But there is a catch: If you just do so, You will also prevent basic HTML5 validation. Therefore, it is good call to prevent defaults on that button only if the form is valid. Otherwise, HTML5 validation will protect You from submitting. jQuery <code>checkValidity()</code> will help with this:</p>

<p>jQuery:</p>

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

<p>Code described above will allow You to use basic HTML5 validation (with type and pattern matching) WITHOUT submitting form.</p>


blocks|key|2139004|text|您谈到了两种不同的东西"HTML5验证“和使用javascript/jquery验证HTML表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2139005|HTML5“具有”用于验证表单的内置选项。例如在字段上使用"required“属性，这可能(基于浏览器实现)在不使用javascript/jquery情况下导致表单提交失败。|2139006|使用javascrip/jquery，您可以这样做|2139007|$('your_form_id').bind('submit',+function()+{
+++//+validate+your+form+here
+++return+(valid)+?+true+:+false;
});|code-block|syntax|javascript|2139008|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You speak of two different things "HTML5 validation" and validation of HTML form using javascript/jquery. </p>

<p>HTML5 "has" built-in options for validating a form. Such as using "required" attribute on a field, which could (based on browser implementation) fail form submission without using javascript/jquery.</p>

<p>With javascrip/jquery you can do something like this</p>

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


blocks|key|3805200|text|var+$myForm+=+$('#myForm+');
if+(!$myForm[0].checkValidity())+{
++$('<input+type="submit">').hide().appendTo($myForm).click().remove();
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3805201|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|2139056|text|要在不使用提交按钮的情况下检查表单的所有必填字段，您可以使用以下功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2139057|您必须将必需的属性分配给控件。|offset|length|style|BOLD|2139058|++$("#btnSave").click(function+()+{
++++$(":input[required]").each(function+()+{+++++++++++++++++++++
++++++++var+myForm+=+$('#form1');
++++++++if+(!$myForm[0].checkValidity())+
++++++++++{++++++++++++++++
++++++++++++$(myForm).submit();++++++++++++++
++++++++++}
++++++++});
++});|code-block|syntax|javascript|2139059|entityMap^0|0|4|3|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>To check all the required fields of form without using submit button you can use below function.</p>

<p>You have to assign <strong>required</strong> attribute to the controls.</p>

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


blocks|key|2138684|text|您不需要使用jQuery来实现这一点。在您的表单中添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2138685|onsubmit="return+buttonSubmit(this)|code-block|syntax|javascript|2138686|或者在JavaScript中：|2138687|myform.setAttribute("onsubmit",+"return+buttonSubmit(this)");|2138688|在您的buttonSubmit函数(或您称之为它的任何函数)中，您可以使用AJAX提交表单。只有当您的表单在HTML5中经过验证时，才会调用buttonSubmit。|offset|length|style|CODE|2138689|如果这对任何人都有帮助，下面是我的buttonSubmit函数：|2138690|function+buttonSubmit(e)
{
++++var+ajax;
++++var+formData+=+new+FormData();
++++for+(i+=+0;+i+<+e.elements.length;+i%2B%2B)
++++{
++++++++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]+%2B+"-status";
++++ajax+=+new+XMLHttpRequest();
++++ajax.addEventListener("load",+manageLoad,+false);
++++ajax.addEventListener("error",+manageError,+false);
++++ajax.open("POST",+action);
++++ajax.send(formData);
++++return+false;
}|2138691|我的一些表单包含多个提交按钮，因此使用if+(submitvalue+==+e.elements[i].value)这一行。我使用单击事件设置了submitvalue的值。|2138692|entityMap^0|0|0|0|0|3|C|1Y|C|0|H|C|0|0|J|13|20|B|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]|$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@$M|18|N|19|O|P]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1B|8|@$M|1C|N|1D|O|P]|$M|1E|N|1F|O|P]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$]]

<p>You don't need jQuery to achieve this. In your form add:</p>

<pre><code>onsubmit="return buttonSubmit(this)
</code></pre>

<p>or in JavaScript:</p>

<pre><code>myform.setAttribute("onsubmit", "return buttonSubmit(this)");
</code></pre>

<p>In your <code>buttonSubmit</code> function (or whatver you call it), you can submit the form using AJAX. <code>buttonSubmit</code> will only get called if your form is validated in HTML5.</p>

<p>In case this helps anyone, here is my <code>buttonSubmit</code> function:</p>

<pre><code>function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i &lt; 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;
}
</code></pre>

<p>Some of my forms contain multiple submit buttons, hence this line <code>if (submitvalue == e.elements[i].value)</code>. I set the value of <code>submitvalue</code> using a click event.</p>


blocks|key|3896083|text|这种方式对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3896084|3896085|在你的form中添加onSubmit属性，别忘了在值中包含return。|ordered-list-item|offset|length|style|CODE|3896086|定义函数。|3896087|3896088|函数联系人(参数){+$.ajax({+url：'sendmail.php'，类型："POST"，dataType："json"，超时:+5000，数据：{参数:参数}，成功:函数(data，textStatus，jqXHR)+{+//回调}，错误:函数(jqXHR，textStatus，errorThrown)+{+console.log(jqXHR.responseText)；}+})；返回false；}|3896089|entityMap^0|0|0|3|4|A|8|T|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@$F|T|G|U|H|I]|$F|V|G|W|H|I]|$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|Z|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

<p>This way works well for me:</p>

<ol>
<li><p>Add <code>onSubmit</code> attribute in your <code>form</code>, don't forget to include <code>return</code> in the value.</p>

<pre><code>&lt;form id='frm-contact' method='POST' action='' onSubmit="return contact()"&gt;
</code></pre></li>
<li><p>Define the function.</p>

<pre><code>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;
}
</code></pre></li>
</ol>


blocks|key|3804935|text|我有一个相当复杂的情况，我需要多个提交按钮来处理不同的事情。例如，保存并删除。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3804936|它的基础是它也不显眼，所以我不能让它只是一个普通的按钮。但也希望利用html5验证。|3804937|此外，如果用户按enter来触发预期的默认提交，submit事件也会被覆盖；在本例中为save。|3804938|下面是表单处理所做的工作，以便仍然使用/不使用javascript和html5验证，同时使用提交和单击事件。|3804939|3804940|+|blockquote|3804941|3804942|3804943|xHTML|offset|length|style|BOLD|3804944|<form>
++++<input+type="text"+required="required"+value=""+placeholder="test"+/>
++++<button+type="submit"+name="save">Save</button>
++++<button+type="submit"+name="delete">Delete</button>
</form>|code-block|syntax|javascript|3804945|JavaScript|3804946|//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);|3804947|使用Javascript需要注意的是，浏览器的默认onclick必须传播到提交事件，以便在不支持代码中每个浏览器的情况下显示错误消息。否则，如果单击事件被event.preventDefault()覆盖或返回false，它将永远不会传播到浏览器的提交事件。|3804948|需要指出的是，在某些浏览器中，当用户按回车键时不会触发表单提交，而是触发表单中的第一个提交按钮。因此，有一个console.log('form+submit')来表示它没有触发。|3804949|entityMap^0|0|0|0|0|0|0|0|0|0|5|0|0|0|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1D|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@$P|1H|Q|1I|R|S]]|9|@]|A|$]]|$1|T|3|U|5|V|7|1J|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1K|8|@$P|1L|Q|1M|R|S]]|9|@]|A|$]]|$1|10|3|11|5|V|7|1N|8|@]|9|@]|A|$W|X]]|$1|12|3|13|5|6|7|1O|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1P|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|17|$]]

<p>I had a rather complex situation, where I needed multiple submit buttons to process different things. For example, Save and Delete. </p>

<p>The basis was that it was also unobtrusive, so I couldn't just make it a normal button. But also wanted to utilize html5 validation.</p>

<p>As well the submit event was overridden in case the user pressed enter to trigger the expected default submission; in this example save.</p>

<p>Here is the efforts of the processing of the form to still work with/without javascript and with html5 validation, with both submit and click events.</p>

<blockquote>
  <p><strong><a href="http://jsfiddle.net/TXGry/" rel="nofollow">jsFiddle Demo - HTML5 validation with submit and click overrides</a></strong></p>
</blockquote>

<p><strong>xHTML</strong></p>

<pre><code>&lt;form&gt;
    &lt;input type="text" required="required" value="" placeholder="test" /&gt;
    &lt;button type="submit" name="save"&gt;Save&lt;/button&gt;
    &lt;button type="submit" name="delete"&gt;Delete&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code>//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);
</code></pre>

<p>The caveat to using Javascript is that the browser's default onclick must propagate to the submit event MUST occur in order to  display the error messages without supporting each browser in your code.
Otherwise if the click event is overridden with event.preventDefault() or return false it will never propagate to the browser's submit event.</p>

<p>The thing to point out is that in some browsers will not trigger the form submit when the user presses enter, instead it will trigger the first submit button in the form. Hence there is a console.log('form submit') to show that it does not trigger.</p>


blocks|key|3895737|text|您可以在不提交表单的情况下这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3895738|例如，如果id为"search“的表单提交按钮在另一个表单中。您可以在该submit按钮上调用click事件，然后调用ev.preventDefault。对于我的情况，我从表单A提交中验证表单B。像这样|3895739|function+validateFormB(ev){+//+DOM+Event+object
++//search+is+in+Form+A
++$("#search").click();
++ev.preventDefault();
++//Form+B+validation+from+here+on
}|code-block|syntax|javascript|3895740|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can do it without submitting the form.</p>

<p>For example, if the form submit button with id "search" is in the other form . You can call click event on that submit button and call ev.preventDefault after that.
For my case I validate form B from Form A submission.
Like this</p>

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


blocks|key|3896212|text|2022+vanilla+JS解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3896213|纯JavaScript具有您需要的所有函数。我知道问题是关于jQuery的，但我确信我不是这里唯一一个搜索普通JS解决方案的人，所以我发现了以下内容。|3896214|测试整个窗体|3896215|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.
})|code-block|syntax|javascript|3896216|测试特定字段|3896217|checkValidity()和reportValidity()不仅可以在表单上使用，还可以在特定字段上使用。如果不需要，不需要创建表单或虚拟的提交按钮。|offset|length|style|CODE|3896218|//+Get+field+of+interest
let+inputElement+=+document.querySelector("[name='"+%2B+inputName+%2B+"']");
//+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|3896219|显然，这必须在由事件侦听器调用的函数中才有意义。|3896220|entityMap^0|0|0|0|0|0|0|F|G|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]|$O|16|P|17|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<h2>2022 vanilla JS solution</h2>
<p>Pure JavaScript has all the functions you need for this. I know the question was about jQuery, but I'm sure that I'm not the only one here that searched for a vanilla JS solution, so here is what I've found out.</p>
<h3>Test entire form</h3>
<pre class="lang-js prettyprint-override"><code>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.
})
</code></pre>
<h3>Test specific field</h3>
<p><code>checkValidity()</code> and <code>reportValidity()</code> can not only be used on the form, but also on specific fields. No need to create a form or a dummy submit button if not needed.</p>
<pre class="lang-js prettyprint-override"><code>// Get field of interest
let inputElement = document.querySelector(&quot;[name='&quot; + inputName + &quot;']&quot;);
// 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
</code></pre>
<p>This has to in a function called by an event listener to make sense, obviously.</p>


blocks|key|3805031|text|$("#form").submit(function()+{+$("#saveButton").attr("disabled",+true);+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3805032|这不是一个最好的答案，但对我来说很有效。|unstyled|3805033|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
</code></pre>

<p>not a best answer but works for me.</p>


blocks|key|3805073|text|我知道这个问题已经得到了回答，但我有另一个可能的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3805074|如果使用jquery，您可以做到这一点。|3805075|首先，在jquery上创建两个扩展，以便您可以根据需要重用这些扩展。|3805076|$.extend({
++++bypassDefaultSubmit:+function+(formName,+newSubmitMethod)+{
++++++++$('#'%2BformName).submit(function+(event)+{
++++++++++++newSubmitMethod();
++++++++++++event.preventDefault();
++++++++}
++++}
});|code-block|syntax|javascript|3805077|接下来，在你想要使用它的地方做一些类似的事情。|3805078|<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>|3805079|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I know this has already been answered, but I have another possible solution.</p>

<p>If using jquery, you can do this.</p>

<p>First create a couple of extensions on jquery so you can resuse these as needed.</p>

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

<p>Next do something like this where you want to use it.</p>

<pre><code>&lt;script type="text/javascript"&gt;
    /*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
    }

&lt;/script&gt;
</code></pre>


blocks|key|2138658|text|$(document).on("submit",+false);

submitButton.click(function(e)+{
++++if+(form.checkValidity())+{
++++++++form.submit();
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2138659|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});
</code></pre>


blocks|key|3805170|text|这使得form+me+to+可以通过表单验证来显示本地HTML5错误消息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3805171|<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');

}


});|code-block|syntax|javascript|3805172|注：+RegForm是form+id。|CODE|3805173|Reference|3805174|希望能帮助别人。|3805175|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/26524497/2218697^0|E|N|0|0|B|7|0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|P|3|Q|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>This worked form me to <strong>display the native HTML 5 error messages with form validation.</strong></p>

<pre><code>&lt;button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"&gt; Register &lt;/button&gt;



$('#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("&lt;i class='fa fa-spinner fa-spin'&gt;&lt;/i&gt; Please Wait...");

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

}


});
</code></pre>

<p><strong>Note:</strong> RegForm is the <code>form id</code>.</p>

<p><a href="https://stackoverflow.com/a/26524497/2218697">Reference</a></p>

<p>Hope helps someone.</p>


blocks|key|3805193|text|这是一种非常简单的方式，可以让HTML5对任何表单执行验证，同时仍然具有对表单的现代JS控制。唯一需要注意的是submit按钮必须位于<form>内部。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3805194|html|3805195|<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}$%7C\d{3})[-+]?\d{3}[-+]?\d{4}"+size="12"+maxlength="12"+required>
<input+id="submit"+type="submit"+value="Create+Account"+>
</form>|code-block|syntax|javascript|3805196|js|3805197|//+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...
}|3805198|entityMap^0|1V|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>This is a pretty straight forward way of having HTML5 perform validation for any form, while still having modern JS control over the form.  The only caveat is the submit button must be inside the <code>&lt;form&gt;</code>.</p>

<p>html</p>

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

<p>js</p>

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


blocks|key|3805284|text|我认为最好的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3805285|将使用jQuery+Validation插件，它使用表单验证的最佳实践，它也有良好的浏览器支持。所以你不需要担心浏览器的兼容性问题。|offset|length|3805286|我们还可以使用jQuery+validation+valid()函数，它可以检查选定的表单是否有效，或者检查所有选定的元素是否有效，而无需提交表单。|3805287|<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:+"+%2B+form.valid()+);
++});
</script>|code-block|syntax|javascript|3805288|entityMap|0|LINK|mutability|MUTABLE|url|https://jqueryvalidation.org/|1|https://jqueryvalidation.org/valid/^0|0|3|H|0|0|P|7|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>I think the best approach </p>

<p>will be using <a href="https://jqueryvalidation.org" rel="nofollow noreferrer">jQuery Validation</a> plugin which uses best practice for form validation and it also has good browser support. So you don't need to worry about browser compatibility issues.</p>

<p>And we can use jQuery validation <a href="https://jqueryvalidation.org/valid/" rel="nofollow noreferrer">valid()</a> function which checks whether the selected form is valid or whether all selected elements are valid without submitting the form.</p>

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


blocks|key|3805340|text|根据问题，首先应该可以使用jQuery验证html5有效性，但在大多数答案中，这并没有发生，原因如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3805341|同时使用html5表单的默认函数进行验证|3805342|checkValidity();//+returns+true/false|code-block|syntax|javascript|3805343|我们需要理解，当像这样选择时，jQuery返回对象数组|3805344|$("#myForm")|3805345|因此，您需要指定第一个索引才能使checkValidity()函数工作|3805346|$('#myForm')[0].checkValidity()|3805347|以下是完整的解决方案：|3805348|<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:+"%2Bresp);}
++++++++});
++++}
}|3805349|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>According to the question html5 validity should be validate able using jQuery at first and in most of the answer this is not happening and the reason for this is as following: </p>

<p>while validating using html5 form's default function </p>

<pre><code>checkValidity();// returns true/false
</code></pre>

<p>we need to understand that jQuery returns object array, while selecting like this</p>

<pre><code>$("#myForm")
</code></pre>

<p>therefore, you need to specify the first index to make checkValidity() function work</p>

<pre><code>$('#myForm')[0].checkValidity()
</code></pre>

<p>here is the complete solution:</p>

<pre><code>&lt;button type="button" name="button" onclick="saveData()"&gt;Save&lt;/button&gt;

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


<p>I have this form in my app and I will submit it via AJAX, but I want to use HTML5 for client-side validation. So I want to be able to force the form validation, perhaps via jQuery.</p>

<p>I want to trigger the validation without submitting the form. Is it possible?</p>


How to force a html5 form validation without submitting it via jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的应用程序中有这个表单，我将通过AJAX提交它，但我想使用HTML5进行客户端验证。因此，我希望能够强制执行表单验证，可能是通过jQuery。我想在不提交表单的情况下触发验证。有可能吗？

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

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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