35

我有以下代码示例适用于浏览器，当他们在此处的电子邮件之类的输入中看到 HTML5“必需”时进行检查：

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>​

这是上面的小提琴。

但是，在我的应用程序中，我在表单之外使用了一个按钮，并将以下代码附加到该按钮的单击事件中：

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

我在这里有两个问题：

  • 以下代码做了什么： (!$form.valid || $form.valid())
  • 如何使用新的 HTML5 检查检查我的表单有效性？
4

2 回答 2

68

假设您已将表单元素设置为一个名为 的对象$form，那么if (!$form.valid || $form.valid())这是一种聪明的语法，它意味着“如果$form没有调用的方法valid，或者如果valid()返回 true”。通常到那时您已经安装并初始化了 jQuery Validation 插件，但这会防止表单在未加载验证插件时被禁用。

您可以使用 HTML5 方法进行类似的测试checkValidity，如下所示：

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

编辑： checkValidity 是HTML5 表单规范中的一个函数。截至 2016 年 2 月，CanIUse.com 报告超过 95% 的浏览器支持它。

于 2012-09-18T05:09:30.697 回答
1

在 HTML5 中，您可以在元素上使用“form”属性来显式地将其与 Form 元素相关联，而不管它在页面结构中的位置：http: //developers.whatwg.org/association-of-controls-and -forms.html#attr-fae-form

在兼容的浏览器中，您应该能够将 input[type=submit][form=id] 元素放在任何地方，并且仍然可以正确触发验证和提交过程。

我倾向于将应该拦截提交过程的代码放在表单的“提交”事件处理程序中，这样它是由用户按下 Enter 键以及我拥有的任何 input[type=submit] 按钮触发的。

于 2012-09-18T05:20:59.537 回答