jQuery UI Wählen Sie in Kombination mit dem Validierungs-Plugin

Question

Ich möchte meine Selectboxen validieren, aber weil ich jQuery UI zum Stylen meiner Selectboxen verwende, funktioniert es nicht.

JQuery UI ist die reale selectbox auf dem Display eingestellt: keine damit ist, warum es nicht sehen arbeiten:

Aber wie kann ich es mit der jQuery UI selectbox Plugin funktioniert?

Ich hoffe, jemand hat eine funktionierende Lösung. :)

Answer 1

Dies ist nur aufgrund der Tatsache, dass selectMenu verbirgt die select. Standardmäßig validiert validieren nicht verdeckte Elemente. Sie können dies, indem die zu []ignore Option Einstellung ändern:

$(".valid").validate({ 
    meta: "validate", 
    ignore: [], 
    groups: { 
     checks: checkbox_names 
    }, 
    errorPlacement: function(error, element) { 
     if (element.attr("type") == "checkbox") 
      error.insertAfter(element.parent().siblings().last()); 
     else if (element.is("select")) { 
      error.insertAfter(element.next("a.ui-selectmenu")) 
     } 
     else error.insertAfter(element); 
    } 
}); 

Wie Sie bemerkt haben, ändert sich die selectMenu nicht die Eingabe erneut zu validieren. Sie können manuell durch Antippen in die change Ereignis auf dem selectMenu und Wieder Validierung des Elements um dieses zu erhalten:

// SELECTBOXES 
$(function() { 
    $('.dataTables_length input, select').not("select.multiple").selectmenu({ 
     style: 'dropdown', 
     transferClasses: true, 
     width: null, 
     change: function() { 
      $(".valid").validate().element(this); 
     } 
    }); 
}); 

Beispiel:http://jsfiddle.net/8YvSN/