需要 html5 和 jQuery submit()答案

【问题标题】：html5 required and jQuery submit()需要 html5 和 jQuery submit()
【发布时间】：2012-07-08 07:17:01
【问题描述】：

我正在尝试将html5实现到表单中，但是当我通过jquery提交表单并尝试使用html5“必需”属性时遇到了问题。

这是我的表格，很简单：

<form action="index.php" id="loginform">
      <input name="username" required placeholder="username" type="text">    
      <a href="javascript:$('#loginform').submit();">Login</a>
</form>

问题是当通过jquery提交表单时，它只是绕过了所需的属性。我知道 required 应该只在表单由用户而不是脚本提交时才有效，因此当我将锚点更改为提交输入时，它可以完美运行。

我的观点是，是否有办法强制 jquery .submit() 使用 html5 所需的属性。

提前感谢您的回答

【问题讨论】：

如果您的所有用户都在使用 Chrome，您可以使用 checkValidity 方法。 Example - 可惜 IE 仍然落后。
你为什么使用链接，而不是提交按钮？
'我的意思是，是否有办法强制 jquery .submit() 使用 html5 所需的属性。'。他的表格很可能只是为了说明问题而不会使问题进一步复杂化。
好问题，好尝试

标签： jquery html

【解决方案1】：

我做了以下

<form>
    ...
    <button type="submit" class="hide"></button>
</form>

<script>
    ...
    $(...).find('[type="submit"]').trigger('click');
    ...
</script>

¡有效！

【讨论】：

class="hide" 或 style="display:none"

【解决方案2】：

你可以

在提交时触发 click 事件
使用$("form")[0].checkValidity() 手动检查验证
使用$("form :invalid")手动查找无效元素

【讨论】：

【解决方案3】：

你是对的。 HTML5 验证仅在用户触发提交时才有效。就是这样。 :(

您需要在提交时编写自己的自定义方法。或者你可以使用一个很好的插件来根据 html5 属性验证字段。

here is the plugin link

【讨论】：

【解决方案4】：

我遇到了完全相同的问题。我有一个按钮，我故意将其设置为不提交，因为它是在第一次单击时显示一个表单。第二次点击同一个按钮 $('form[name=xxx]').submit();正在触发，我还发现 HTML5 验证不起作用。

我的诀窍是添加一行代码，以便在我第一次单击此按钮后，我将其类型更改为动态提交。

$("#btn").attr("type","submit");

这就像一个魅力！

【讨论】：

【解决方案5】：

https://stackoverflow.com/a/30124479/7915308的回答

<!DOCTYPE html>
<html>
<body>

<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>

</body>
</html>

【讨论】：

【解决方案6】：

这是我个人解决方案的一个例子：

var form = $('#loginform');

// Trigger HTML5 validity.
var reportValidity = form[0].reportValidity();

// Then submit if form is OK.
if(reportValidity){
    form.submit();
}

【讨论】：

【解决方案7】：

您可以改为调用一个函数并使用该函数来检查是否所有具有所需属性的节点都有值。

有一些插件可以做到这一点：http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

【讨论】：

我知道，我想同时使用 jquery 和 html5，因为我想成为我的主要验证者 html5
有一些插件可用。

【解决方案8】：

这里有一些例子，如何验证 html5：

function validateForm(form) {
  if (form.username.value=='') {
    alert('Username missing');
    return false;
  }
  return true;
}

<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();">
  <input name="username" placeholder="username" required="required" type="text" />
  <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a>
  <a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a>
  <input name="send" type="submit" value="Login3" />
  <input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" />
</form>

完整代码here。这里有一件事很奇怪： $(document.forms.loginform).submit();工作正常，但 document.forms.loginform.submit();失败。谁能解释一下原因？

【讨论】：

【解决方案9】：

工作演示 http://jsfiddle.net/3gFmC/

希望这会有所帮助:)

代码

$('#btn_submit').bind('click', function() {

        $('input:text[required]').parent().show();
        // do whatever;
 });

【讨论】：