如何檢查不包含提交按鈕的HTML5表單的有效性?

[英]How can I check the validity of an HTML5 form that does not contain a submit button?


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:

我有以下代碼示例在瀏覽器中工作,檢查他們何時在輸入上看到HTML5“required”,如此處的電子郵件:

<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:

但是在我的應用程序中,我在表單外部使用了一個按鈕,以下代碼附加到該按鈕的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);
}

I have two questions here:

我這里有兩個問題:

  • What does the following code do: (!$form.valid || $form.valid())
  • 以下代碼的作用是什么:(!$ form.valid || $ form.valid())
  • How can I check my form validity using the new HTML5 checks?
  • 如何使用新的HTML5檢查檢查表單有效性?

2 个解决方案

#1


44  

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.

假設你已經將form元素設置為一個名為$ form的對象,那么if(!$ form.valid || $ form.valid())是巧妙的語法,意思是“如果$ form沒有一個名為valid的方法,或者如果valid()返回true“。通常,您將在那時安裝並初始化jQuery Validation插件,但是如果未加載驗證插件,這將阻止表單被禁用。

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

你可以使用HTML5方法checkValidity進行類似的測試,看起來像這樣:

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.

編輯:checkValidity是HTML5表單規范中的一個函數。截至2016年2月,CanIUse.com報告稱超過95%的瀏覽器都支持它。

#2


1  

In HTML5, you may use a "form" attribute on an element to explicitly associate it with a Form element regardless of where it is positioned in the page structure: http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

在HTML5中,您可以在元素上使用“form”屬性將其與Form元素顯式關聯,而不管它在頁面結構中的位置如何:http://developers.whatwg.org/association-of-controls-and -forms.html#ATTR-FAE形式

In compliant browsers, you ought to be able to put your input[type=submit][form=id] element anywhere and still have it properly trigger the validation and submission process.

在兼容的瀏覽器中,您應該能夠將輸入[type = submit] [form = id]元素放在任何位置,並且仍然可以正確地觸發驗證和提交過程。

I tend to put code that is supposed to intercept the submission process in the form's "submit" event handler, that way it is triggered by users hitting the Enter key as well as any input[type=submit] buttons I have.

我傾向於在表單的“提交”事件處理程序中放置應該攔截提交過程的代碼,這種方式是由用戶按Enter鍵以及我擁有的任何輸入[type = submit]按鈕觸發的。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/09/18/4f0a7d7c4e3153fefbbbff25531543d8.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com