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

Question

我有以下代码示例在浏览器中工作,检查他们何时在输入上看到HTML5"required",如此处的电子邮件:

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

这是上面的小提琴.

但是在我的应用程序中,我使用了表单外部的按钮,以及附加到该按钮的click事件的以下代码:

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

Answer 1

假设您已将表单元素设置为被调用的对象$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%的浏览器都支持它.