Question

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

这是我的表格，非常简单：

<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所需的属性。

提前感谢您的答案

Answer 1

我做了以下

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

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

¡它有效！

Answer 2

你可以

在提交

click

使用$("form")[0].checkValidity()
使用$("form :invalid")

Answer 3

你是对的。 HTML5验证仅在用户触发提交时有效。这是怎么回事。：（

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

here is the plugin link

Answer 4

我有完全相同的问题。我有一个单独的按钮，我故意设置不是一个提交，因为它是在第一次点击显示一个表单。再次点击同一个按钮$（'form [name = xxx]'）。submit（）;正在解雇，我发现HTML5验证不起作用。

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

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

这就像魅力一样！

Answer 5

您可以调用函数，并使用该函数检查具有required属性的所有节点是否都有值。

有一些插件可以执行此操作：http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

Answer 6

以下是一些示例，如何验证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（）;失败。有人能解释一下原因吗？

Answer 7

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

Answer 8

以下是我个人解决方案的一个示例：

var form = $('#loginform');

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

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

Answer 9

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

希望这会有助:)

<强>码

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

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

需要html5和jquery submit（）

9 个答案: