39

我正在尝试将 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 所需的属性。

提前感谢您的答案

4

9 回答 9

44

我做了以下

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

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

有用！

于 2013-02-28T08:20:00.803 回答
37

你可以

  • click提交时触发事件
  • 手动检查验证$("form")[0].checkValidity()
  • 使用手动查找无效元素$("form :invalid")
于 2012-07-08T10:12:30.703 回答
2

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

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

这是插件链接

于 2012-07-08T07:34:45.800 回答
1

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

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

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

这就像一个魅力！

于 2014-03-10T19:17:21.913 回答
1

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

于 2019-04-16T13:21:04.813 回答
1

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

var form = $('#loginform');

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

// Then submit if form is OK.
if(reportValidity){
    form.submit();
}
于 2020-02-12T05:34:32.343 回答
0

以下是一些示例，如何验证 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>

完整代码在这里。这里有一件事很奇怪： $(document.forms.loginform).submit(); 工作正常，但 document.forms.loginform.submit(); 失败。有人可以解释为什么吗？

于 2012-07-08T10:16:45.927 回答
0

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

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

于 2012-07-08T07:23:11.787 回答
-1

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

希望这会有所帮助:)

代码

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

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

​</p>

于 2012-07-08T07:34:33.273 回答