如何检查不包含提交按钮的 HTML5 表单的有效性？

Posted 2023-05-08

【中文标题】如何检查不包含提交按钮的 HTML5 表单的有效性？

【英文标题】：How can I check the validity of an HTML5 form that does not contain a submit button?

【发布时间】：2012-09-10 08:09:40

【问题描述】：

我有以下代码示例，可在浏览器中检查他们何时在此处的电子邮件之类的输入中看到 html5“必需”：

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

这是上面的fiddle。

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

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 检查检查表单的有效性？

【问题讨论】：

你从哪里得到这个例子？ $form 是一个对象，它没有在任何地方定义，所以这个难题缺少一块。

声明 $form = $('#myForm)

感谢您添加 $form = $('#myForm)。我确实错过了。

【参考方案1】：

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

您可以使用 HTML5 方法 checkValidity 进行类似的测试，看起来像这样：

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

编辑：checkValidity 是a function from the HTML5 forms spec。截至 2016 年 2 月，CanIUse.com 报告称over 95% of browsers support it。

【讨论】：

checkValidity 是 jQuery 函数吗？我之所以问这个问题是因为我查了一下，发现 $('#profileform')[0].checkValidity() 根据我读到的那篇文章，我想知道是否应该包含 [0]。

@Anne 我用几个额外的链接编辑了这篇文章。基本上，checkValidity 是一个 HTML5 函数，而不是 jQuery 的一部分。关于[0]，jQuery $ 函数在您将字符串传递给它时返回对象列表，因此为了返回单个对象（如您的表单），您需要指定一个索引。在 jQuery 文档中查找 .get(index) 以获取更多信息。

感谢您的链接。我的代码如下所示： var $form = $modal.find('#main-form');当我尝试这行代码时，即使我在选择器中指定了 ID，您也只是通过了该行而没有做任何事情。所以我应该把它改成 var $form = $modal.find('#main-form')[0]; ?

基本上，是的。 $('query') 和 object.find('query') 都返回一个容易混淆的称为“jQuery”的对象，您需要使用 .get(0) 或 get(0) 才能返回作为 checkValidity 方法的单个项目。这就像打开书架和打开一本书的区别——用收藏来做是没有意义的。

在 HTMLFormElement api 中还有 reportValidity() 方法，如果表单元素无效 并且 为每个无效元素触发 invalid 事件，则该方法返回 false。 但是不幸的是，这与任何 IE 版本都不兼容：90% browser support。

【参考方案2】：

在 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] 按钮触发。