Question

I’m just exploring the Validate plug-in for JQuery. During implementing in my webapp made with JQueryMobile I stumbled over the fact that validating such an element is not so simple like usual input-elements.

So the Question is: How to enable validation for select?

Answer 1

The trick consists out of two parts:

1. Validate is by default ignoring :hidden. But that’s what JQM does with an <select>: hide it and placing a div-span-wrapper on top. Solution is to redefine the ignore-selector:

   {ignore: ":hidden:not(select)"}
   

2. To inform the user about the invalid field you have to show the error right on the wrapper:

   $(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput")
   

And now in an working example:

$.validator.setDefaults({
    debug: true,
    ignore: ":hidden:not(select)",
    submitHandler: function() { alert("submitted!"); },
    showErrors: function(map, list) {
        $(this.currentElements).each(function() {
            if(this.nodeName == "SELECT") {
                $(this).closest('.ui-select').removeAttr("title").removeClass("invalidInput");
                return true;
            }
            $(this).removeAttr("title").removeClass("invalidInput");
        });
        $.each(list, function(index, error) {
            if(error.element.nodeName == "SELECT") {
                $(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput");
                return true;
            }
            $(error.element).attr("title", error.message).addClass("invalidInput");
        });
    }
});

$('div[data-role="page"]').bind('pageinit', function(event) {
    var rules = {};
    $('input:not(:button)').each(function() {
        rules[this.name] = {required:true}; 
    });
    $('#fzgherst').each(function() {
        // revalidates the select when changed, other elements gets revalidatet onblur
        $(this).on('change', function() {$(this).valid();});
        rules[this.name] = {required:true}; 
    });
    $("form").validate({
        rules: rules
    });
});

That’s all folks!