CODEWITHSUNDEEP
jqueryjquery-validate
dbizzell
dbizzell

Reputation: 37

jQuery validate custom method for select

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

Upvotes: 0

Views: 530

Answers (1)

Sparky
Sparky

Reputation: 98738

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.

Upvotes: 1

Related Questions