jQuery validate custom method for select

Question

I'm using the jQuery validator along with the uniform plugin to fancy up my select elements. The problem is when a select is returned invalid the user doesn't know since the element is hidden. So I'm trying to write a custom method to add the error class to the parent element if the select has an error.

This is what I have so far:

$.validator.addMethod(
    "selectvalidate", function(){
        if(!$(element).is(':visible')){
            return true;
        }
        else if($(element).val() == "") {
            $(element).parent('.selector').addClass('error');
            return false;
        }
        else{
            $(element).parent('.selector').removeClass('error');
            return true;
        }
    },
    "Please select an option"
);

HTML

<fieldset>
   <label>Field Label</label>
     <div class="selector"></div>
     <span>- Select -</span>
     <select>
         <option></option>
     </select>
</fieldset>

Any help would be great

Sparky · Accepted Answer · 2013-01-11 19:34:46Z

1

You do not necessarily need a custom method. Simply use the errorPlacement: option.

This is the default function already built-in...

errorPlacement: function(error, element) {
    error.insertAfter(element);
}

Working Demo: http://jsfiddle.net/4ySLB/

You could edit the default function to place the error anywhere, and manipulate anything else in the DOM as needed.

To get a more customized answer, you'll have to provide more code and a jsFiddle demo.

edited Jan 11, 2013 at 19:34

answered Jan 11, 2013 at 19:29

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery validate custom method for select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related