html表單屬性和驗證

-1

我試圖通過查看一堆不同的例子來找出基本的HTML表單驗證。html表單屬性和驗證

我在由Kajabi用一個例子來，有一個在http://megaph.com/pages/39841

當，當我看着表單標籤包含這個相當奇怪的標籤QL-選擇啓用一個例子。如果我刪除這個標籤，表單驗證將停止工作，但表單會重定向到aweber。如果我放置它，驗證工作，但形式不會發布。

它沒有通常的屬性，它可能不是CSS

我只是好奇這是什麼，以及爲什麼它的工作原理。任何人有任何想法？

來源

2014-09-29 SimbaFX

正如ceejayoz指出的那樣，他們的驗證是自定義的，並且很難解構。如果您試圖瞭解表單驗證，那麼這不是最好的研究範例。

如果你只是想自己實現表單驗證，下面是一個替代的「構建你自己的」表單驗證 - 非常簡單。

它將字段標籤和ID存儲在一個數組中，然後遍歷數組來測試每個字段。完成後，它會報告哪些字段驗證失敗。

jsFiddle Demo

HTML：

One: <input type="text" id="f1"><br /> 
Two: <input type="text" id="f2"><br /> 
Three: <input type="text" id="f3"><br /> 
Four: <input type="text" id="f4"><br /> 
<br /> 
<input type="button" id="mybutt" value="Go" />

jQuery的：

var chkFld, arrAll = {'One':'f1','Two':'f2','Three':'f3','Four':'f4'}; 

$('#mybutt').click(function() { 
    var errMsg='', badFlds='', firstBad=''; 
    for(var key in arrAll){ 
     chkFld = '#'+arrAll[key]; 
     $(chkFld).removeClass('error'); 
     if ($(chkFld).val() ==''){ 
      $(chkFld).addClass('error'); 
      //alert('Please complete field ' + arrAll[key]); 
      errMsg += '*' + key + '\n'; 
      if (firstBad=='') firstBad=chkFld; 
     } 
    } 
    if (errMsg != '') { 
     alert(errMsg); 
     $(firstBad).focus(); 
    } 
}); //END mybutt.click

CSS：

.error{border:1px solid red;background:yellow;}

來源

2014-09-29 16:24:26 gibberish

這不是什麼標準。他們只是添加任意屬性並使用JavaScript來處理它們。看看他們的JS顯示線如this.emailInput=this.formEl.find('[ql-id="optin_email"] input')。

來源

2014-09-29 16:15:09 ceejayoz

這真的很有幫助，我沒有意識到自定義屬性，直到我閱讀你的文章，所以這就讓問題更加清晰。我通常只是使用jquery插件進行驗證，而我之前沒有看到過這種方法，只是好奇而已。再次感謝 – SimbaFX 2014-09-30 16:20:25

@SimbaFX關於這些任意屬性的註釋--HTML5引入了'data'屬性作爲這樣做的標準方法。 – ceejayoz 2014-09-30 16:25:24

html表單屬性和驗證

回答

相關問題