jQuery validate plugin is working unexpectedly

Question

I am using jQuery mobile theme and jQuery validate plugin for validation purpose. The behavior of the plugin is un-expected. First see my html code

<ul data-role="listview" data-inset="true" id="updatepage">
    <form method="POST" action="/update-account-info" accept-charset="UTF-8" data-ajax="false" id="updateUser">
        <div data-role="content">
            <li data-role="fieldcontain">
                <input required="required" class="slide1el" id="first_name" data-clear-btn="true" placeholder="First Name" name="first_name" type="text" value="Awais">            
                <div class="error-wrapper"></div>
            </li>

            <li data-role="fieldcontain">
                <input class="slide1el" id="last_name" data-clear-btn="true" placeholder="Last Name" name="last_name" type="text" value="Qarni">            
                <div class="error-wrapper"></div>
            </li>

            <li data-role="fieldcontain">
                <input class="slide1el" id="website" data-clear-btn="true" placeholder="Website URL" name="website" type="text">            
                <div class="error-wrapper"></div>
            </li>
            <div>
               <div class="ui-block-a"><button type="button" data-theme="a">Cancel</button></div>
               <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </div>
        </div>
    </form>
</ul> 

And here is my javascrip code

 jQuery("#updateUser").validate({
    errorElement: "label",
    focusCleanup: true,
    rules: {

        first_name: {
            required : true
        },
        last_name: {
            required : true
        },
        website: {
            required : true,
            url : true
        }
    },
    messages : {
        first_name : {
            required : 'First Name is required',
        },
        last_name : {
            required : 'Last Name is required',
        },
        website : {
            required : 'Website is required',
            url : 'Please enter correct URL'
        }
    },
    onkeyup: false,
    errorPlacement: function (error, element) {
        element.parents('li').find('div.error-wrapper').html(error)
        element.parents('li').find('div.error-wrapper').find('label').removeClass('error_text');
    },
    // set the errorClass as a random string to prevent label disappearing when valid
    errorClass : "error_text",
    validClass : "ui-focus",
    // use highlight and unhighlight
    highlight: function (element, errorClass, validClass) {

        jQuery(element).parent().addClass(errorClass).removeClass(validClass);

    },
    unhighlight: function (element, errorClass, validClass) {
        jQuery(element).parent().removeClass(errorClass)
        jQuery(element).parent().next().find('label').remove();
        jQuery(element).parent().parent().next().find('label').remove();

    }
});

What I am currently doing that when user submits form, I try to validate the form. If input field is empty, add a red border to the field and show the custom error message in div class=error-wrapper .

But when I submit error button, it only creates focus on first empty field it finds in DOM. And when I click anywhere in DOM, it shows the error class and highlight the textbox. I saw it in firebug, when I click submit button, It adds a ui-focus class to the empty element. When I click anywhere in DOM, the ui-focus class is automatically removed and my error classes are added.

I even tried to remove ui-focus class but it doesn't work. Kindly guide me what am I doing wrong?

Answer 1

What's not clear from your code is what the point of the highlight/unhighlight functions are?

I found that if I removed them and also set focusInvalid:false everything started working nicely.

So your validate call ends up looking like this (I took out the rules and messages for brevity):

jQuery("#updateUser").validate({
    focusCleanup: true,
    focusInvalid: false,
    /* rules and messages here */       
    onkeyup: false,
    errorPlacement: function (error, element) {
        element.parents('li').find('div.error-wrapper').html(error)
        element.parents('li').find('div.error-wrapper').find('label').removeClass('error_text');
    },
    errorClass : "error_text",
    validClass : "ui-focus"
});

It works as I would expect, see here: http://jsfiddle.net/ryleyb/DC5Sz/1/