Question

我试图通过查看一堆不同的示例来确定基本的HTML表单验证。

我遇到了Kajabi使用的一个例子，http://megaph.com/pages/39841

就是一个例子

当我看到表格标签时，它包含了这个相当奇怪的标签ql-optin。如果我删除此标记，表单验证将停止工作，但表单重定向到aweber。如果我保留它，验证工作，但表格不会发布。

它没有通常的属性，它可能不是CSS

我只是好奇这是什么，为什么它有效。有人有任何想法吗？

Answer 1

这不是什么标准。他们只是添加任意属性并使用JavaScript来处理它们。看看他们的JS会显示像this.emailInput=this.formEl.find('[ql-id="optin_email"] input')这样的行。

Answer 2

正如ceejayoz指出的那样，他们的验证是定制的，很难解构。如果您正在尝试理解表单验证，那么这不是最好的学习示例。

如果您只是想自己实施表单验证，可以选择以下方式来构建自己的表单＃34;表单验证 - 非常简单。

它将字段标签和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;}

html表单属性和验证

2 个答案: