blocks|key|406766|text|不，在所有浏览器中，HTML5验证都发生在任何提交事件之前，所以除了更改事件类型之外，它是不可能的，比如单击按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|406767|$('input[type="submit"]').on('click',+function()+{
++++$('fieldset').addClass('error');
});|code-block|syntax|javascript|406768|406769|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p>Nope, the HTML5 validation happens before any submit event, in all browsers, so it's not possible, other than changing the event type, like a click on the button :</p>

<pre><code>$('input[type="submit"]').on('click', function() {
    $('fieldset').addClass('error');
});
</code></pre>

<p><a href="http://jsfiddle.net/GFsEE/4/"><strong>FIDDLE</strong></a></p>


blocks|key|406774|text|使用jquery在页面首次加载时禁用表单上的验证，这样就可以防止在onsubmit处理程序运行之前进行任何验证：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|406775|$(document).ready(function(){
+++$('form').attr('novalidate','novalidate');
})|code-block|syntax|javascript|406776|然后在onsubmit函数的末尾，通过javascript+(使用checkValidity())对每个字段手动运行HTML5验证|406777|entityMap^0|X|8|0|0|3|8|X|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>Use jquery to disable the validation on the form when the page first loads so you can prevent any validation from occurring before your <code>onsubmit</code> handler has run:</p>

<pre><code>$(document).ready(function(){
   $('form').attr('novalidate','novalidate');
})
</code></pre>

<p>and then at the end of your <code>onsubmit</code> function, manually run the HTML5 validation on each of the fields via javascript (using <code>checkValidity()</code>)</p>


blocks|key|3240866|text|将按钮从|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3240867|<input+type='submit'+/>|code-block|syntax|javascript|3240868|添加到常规按钮|3240869|<input+type='button'+id="submit"+/>|3240870|在此之后，只需捕获click事件并自己提交|3240871|$('#submit').on('click',+function()+{
++++$('fieldset').addStyle('error');

++++//+if+everything+is+ok
++++$('form').submit();+
})|3240872|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|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Change the button from </p>

<pre><code>&lt;input type='submit' /&gt;
</code></pre>

<p>to a regular button</p>

<pre><code>&lt;input type='button' id="submit" /&gt;
</code></pre>

<p>And after that, just capture the click event and do the submit yourself</p>

<pre><code>$('#submit').on('click', function() {
    $('fieldset').addStyle('error');

    // if everything is ok
    $('form').submit(); 
})
</code></pre>


blocks|key|3453773|text|您可以拦截该元素的"invalid"事件，应用该类，然后使用return+false来取消它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3453774|https://developer.mozilla.org/en-US/docs/Web/Events/invalid|3453775|此外，我还添加了一个焦点和按键事件来删除该类。|3453776|​|3453777|$('form').submit(function()+{
++++$('fieldset').addStyle('error');
++++return+false;
})
$('input').on("invalid",+function(e){
+++//Code:+Action+(like+ajax...)
+++$(e.target).addClass("error");
+++return+false;
});
$('input').on("focus",+function(e){
+++//Code:+Action+(like+ajax...)
+++$(e.target).removeClass("error");
});
$('input').on("keydown",+function(e){
+++//Code:+Action+(like+ajax...)
+++$(e.target).removeClass("error");
});|code-block|syntax|javascript|3453778|.error+{
++++border:+2px+solid+red;
}|3453779|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form+method='post'+>
++++<fieldset>
++++++++<input+type='email'+name='foo'+required+/>
++++++++<input+type='submit'+/>
++++</fieldset>
</form>|3453780|3453781|请注意，它可能具有与HTMLFormElement.reportValidity()相同的限制|3453782|https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity|3453783|entityMap|0|LINK|mutability|MUTABLE|url|1^0|9|9|U|C|0|0|1N|0|0|0|0|0|0|0|0|A|W|0|0|27|1|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1H|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1I|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1J|8|@]|D|@]|E|$O|P]]|$1|S|3|T|5|N|7|1K|8|@]|D|@]|E|$O|P]]|$1|U|3|K|5|6|7|1L|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|Z|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|G]]|16|$5|12|13|14|E|$15|Y]]]]

<p>You can intercept the <code>"invalid"</code> event for that element, apply the class and then <code>return false</code> to cancel it</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Events/invalid</a></p>

<p>Also I added a focus and keydown event to remove the class.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})
$('input').on("invalid", function(e){
   //Code: Action (like ajax...)
   $(e.target).addClass("error");
   return false;
});
$('input').on("focus", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});
$('input').on("keydown", function(e){
   //Code: Action (like ajax...)
   $(e.target).removeClass("error");
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.error {
    border: 2px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form method='post' &gt;
    &lt;fieldset&gt;
        &lt;input type='email' name='foo' required /&gt;
        &lt;input type='submit' /&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Note that it may have the same limitations as <code>HTMLFormElement.reportValidity()</code></p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity</a></p>


<p>Is there any way to catch a form's <code>submit</code> action before HTML5 validation steps in? </p>

<p>This is <a href="http://jsfiddle.net/Claudius/GFsEE/2/" rel="noreferrer">what I have tried</a>:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;form method='post' &gt;
    &lt;fieldset&gt;
        &lt;input type='email' name='foo' required /&gt;
        &lt;input type='submit' /&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})
</code></pre>

<p>But the <code>submit</code> is only triggered once the HTML5 validation passes. </p>


Catch submit before HTML5 validation

jQuery

HTML5

有没有办法在HTML5验证开始之前捕获表单的submit操作？这是HTML<form method='post' >    <fieldset>        <input type='email' name='foo' required />        <input type='submit' />    </f...

问在HTML5验证之前捕获提交
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5验证之前捕获提交EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5验证之前捕获提交
EN