我如何检查不包含提交按钮的HTML5表单的有效性？ [英] How can I check the validity of an HTML5 form that does not contain a submit button?

问题描述

下面的代码示例适用于浏览器，用于检查他们在输入时看到的HTML5required，比如这里的电子邮件：

 < form id ='myForm'> 
< div> 
< label>电子邮件：
<输入名称=电子邮件类型=需要电子邮件title =输入您的电子邮件> 
< / label> 
< input type = submit> 
< / div> 
< / form> 
  

这是一个小提琴以上。

然而在我的应用程序中我使用外面的按钮

  if（！$ form。）。有效|| $ 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）; 
 
 $ / code> 

这里有两个问题：



• 以下代码做了什么：（！$ form.valid || $ form.valid（））


• 如何查看我的使用新的HTML5检查来验证表单有效性？
解析方案

假设您已将表单元素设置为一个名为 $ form 的对象，然后 if（！$ form.valid || $ form.valid（））是巧妙的语法，意思是如果 $ form 没有称为有效的方法，或者如果 valid（）返回true。通常，您将安装并初始化jQuery Validation插件，但这样可以防止在未加载验证插件时禁用表单。

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

  if （！$ form.checkValidity || $ form.checkValidity（））{
 / *提交表格* / 
} 
  

编辑：checkValidity HTML5表单规范中的函数。截至2016年2月，CanIUse.com报告称， 95％以上的浏览器都支持。

I have the following code example that works in browsers that check when they see the HTML5 "required" on an input like the email here:

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

Here is a fiddle for the above.

However in my application I use a button outside of my form and the following code attached to the click event of that button:

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);
}

I have two questions here:

• What does the following code do: (!$form.valid || $form.valid())
• How can I check my form validity using the new HTML5 checks?

解决方案

Assuming that you have set the form element to an object called $form, then if (!$form.valid || $form.valid()) is clever syntax that means "if $form doesn't have a method called valid, or if valid() returns true". Typically you will have installed and initialized the jQuery Validation plugin by then, but this prevents the form from becoming disabled if the validation plugin is not loaded.

You can do a similar test using the HTML5 method checkValidity, looking something like this:

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

EDIT: checkValidity is a function from the HTML5 forms spec. As of February 2016 CanIUse.com reports that over 95% of browsers support it.

这篇关于我如何检查不包含提交按钮的HTML5表单的有效性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！