触发HTML5表单validation
我有几个不同的字段集的表单。 我有一些Javascript，一次显示字段集的用户。 对于支持HTML5validation的浏览器，我很乐意使用它。 不过，我需要按照我的条件来做。 我正在使用JQuery。
当用户点击JS链接移动到下一个字段集时，我需要在当前字段集上进行validation，并在出现问题时阻止用户前进。
理想情况下，当用户失去对元素的关注时，就会发生validation。
目前没有validation去和使用JavaScript。 宁愿使用本地方法。 🙂
您无法触发本地validation用户界面，但您可以轻松利用任意input元素上的validationAPI：
$('input').blur(function(event) { event.target.checkValidity(); }).bind('invalid', function(event) { setTimeout(function() { $(event.target).focus();}, 50); }); 第一个事件一旦失去焦点就在每个input元素上触发checkValidity ，如果该元素invalid则相应的事件将被第二个事件处理程序触发和捕获。 这个把重点放在元素上，但是这可能很烦人，我假设你有更好的解决scheme来通知错误。 这是我上面的代码的一个工作的例子 。
在某种程度上，您可以trigger HTML5表单validation并向用户显示提示，而无需提交表单！
两个button，一个用于validation，一个用于提交
在validatebutton上设置一个onclick监听器来设置一个全局标志（比如说justValidate ）来表明这个点击是为了检查表单的validation。
然后在提交button上设置一个onclick监听器来将justValidate标志设置为false。
然后在表单的onsubmit处理程序中，检查标志justValidate来决定返回值，并调用preventDefault()来停止要提交的表单。 如您所知，HTML5表单validation（以及用户的GUI提示）是在onsubmit事件之前执行的，即使表单是VALID，您也可以通过返回false或调用preventDefault()来停止表单提交。
而且，在HTML5中你有一个方法来检查表单的validation： form.checkValidity() ，然后你就可以知道表单是否在你的代码中被validation。
好的，这里是演示： http : //jsbin.com/buvuku/2/edit
我不确定这是值得的，因为这篇文章发表在A List Apart做了很好的解释。 MDN也有一个方便的HTML5表单和validation指南 （包括API和相关的CSS）。
将字段集添加或删除HTML5validation有点容易。
$('form').each(function(){ // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS $(this).find('.required').attr('required', false); // ADD THEM BACK TO THE CURRENT FIELDSET // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS $(this).find('fieldset.current .required').attr('required', true); $(this).submit(function(){ var current = $(this).find('fieldset.current') var next = $(current).next() // MOVE THE CURRENT MARKER $(current).removeClass('current'); $(next).addClass('current'); // ADD THE REQUIRED TAGS TO THE NEXT PART // NO NEED TO REMOVE THE OLD ONES // SINCE THEY SHOULD BE FILLED OUT CORRECTLY $(next).find('.required').attr('required', true); }); });
解决这个问题的另一种方法是：
$('input').oninvalid(function (event, errorMessage) { event.target.focus(); });
我似乎find了诀窍：只要删除表单“目标”标记，然后使用提交button来validation窗体和显示提示，检查表单有效通过javascript，然后发表任何。 以下代码适用于我：
<form> <input name="foo" required> <button id="submit">Submit</button> </form>
<script> $('#submit').click( function(e){ var isValid = true; $('form input').map(function() { isValid &= this.validity['valid'] ; }) ; if (isValid) { console.log('valid!'); // post something.. } else console.log('not valid!'); }); </script>
当有一个非常复杂的（特别是asynchronous的）validation过程时，有一个简单的解决方法：
<form id="form1"> <input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" /> <input type="submit" id="form1_submit_hidden" style="display:none" /> </form> ... <script> function submitIfVeryComplexValidationIsOk() { var form1 = document.forms['form1'] if (!form1.checkValidity()) { $("#form1_submit_hidden").click() return } if (checkForVeryComplexValidation() === 'Ok') { form1.submit() } else { alert('form is invalid') } } </script>
