html表单属性和验证

Question

Im trying to figure out basic HTML form validation by looking at a bunch of different examples.

I came across an example used by Kajabi, there's an example at http://megaph.com/pages/39841

When when I look at form tag it contains this rather strange tag ql-optin. If I remove this tag, the form validation stops working, but the form redirects to aweber. If I leave it in, the validation works, but the form wont post.

its none of the usual attributes, and its presumably not CSS

Im just curious what this is, and why it works. Anyone got any ideas ?

Answer 1

This isn't anything standard. They're just adding arbitrary attributes and using JavaScript to work with them. Taking a look at their JS shows lines like this.emailInput=this.formEl.find('[ql-id="optin_email"] input') .

Answer 2

As ceejayoz points out, their validation is customized and will be difficult to deconstruct. If you are trying to understand form validation, that is not the best example to study.

If you just want to implement form validation yourself, here is an alternative "build your own" form validation - very simple.

It stores the field labels and IDs in an array, then loops through the array to test each field. When done, it reports which fields failed validation.

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