Validierung von bootstrap-select mit Jquery Validieren plugin

Question

Ich habe ein Problem zu validieren auswählen, die mit bootstrap-select.js Plugin mit jquery validate-Plugin verschönert wird. Bootstrap-select.js erwartet Klasse selectpicker und nach einer Zeile Code:

$('.selectpicker').selectpicker(); 

für HTML-select verschönernde.

Allerdings verursacht es Probleme in Validierungen mit jquery validate plugin. Die Auswahl wird überhaupt nicht validiert, es sei denn und bis Klasse selectpicker nicht entfernt wird. Sobald die Klasse entfernt wurde, werden die Validierungen ordnungsgemäß durchgeführt. Im Anschluss ist mein html für select:

<select class="input-medium required" id="editCategory_sltCategoryName" 
name="editCategory_sltCategoryName"> 
    <option value=""> 
     Select Category 
    </option> 
    <option> 
     Reusable Components 
    </option> 
    <option> 
     BU Connects 
    </option> 
</select> 

und finden Sie die js:

$('#frm_editCategory').validate({ 
    rules: { 
     editCategory_sltbuName: { 
      required: true 
     }, 
     editCategory_sltCategoryName: { 
      required: true 
     }, 
     editCategory_categoryName: { 
      minlength: 2, 
      required: true, 
      buname: true 
     }, 
     editCategory_categoryDescription: { 
      minlength: 2, 
      required: true, 
      buname: true 
     } 
    }, 
    highlight: function(element) { 
     $(element).closest('.control-group') 
      .removeClass('success').addClass('error'); 
    }, 
    success: function(element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group') 
      .removeClass('error').addClass('success'); 
    }, 
    submitHandler: function(event) { 
     return true; 
    } 
}); 

ich es auch für sie durch das Schreiben benutzerdefinierte Methode zu tun haben versucht, aber es ist nichts.

Answer 1

$('#frm_editCategory').validate({ 
    ignore: ":hidden:not(.selectpicker)" 
}); 

Answer 2

Ich werde mein Bestes tun, um Ihre Frage auf der Grundlage zu beantworten, was Sie beschrieben haben, weil ich glaube, ich habe ein ähnliches Problem festgestellt und in der Lage, es zu lösen.

Zuerst nehme ich an, dass Sie Ihre select mit der selectpicker() Methode richtig initialisiert haben. Oben, schrieb Sie

$('.selectpicker').selectpicker(); 

Aber Sie haben noch keine select Elemente mit Klasse selectpicker, also denke ich, was Sie

war zu schreiben bedeutete

$('select').selectpicker(); 

Wenn Sie selectpicker() aufrufen, wird Bootstrap zusätzliche Elemente einfügen (div, button, span, ul und li) nach Ihrem select Element. Aber beachten Sie, dass Bootstrap dann hide() Ihr Original select Element ist. Da Ihre select ausgeblendet ist, ignoriert JQuery Validate die Validierung, wenn das Formular gesendet wird. Dies ist das Hauptproblem.

JQuery Validate nicht zu sagen, Ihre verborgenen Auswahleingänge zu ignorieren, können Sie folgendes tun ...

// Initialize form validation rules, submit handler, etc. 
$('#frm_editCategory').validate({ 
    . 
    . 
    . 
}); 

// The default value for $('#frm_editCategory').validate().settings.ignore 
// is ':hidden'. Log this to the console to verify: 
console.log($('#frm_editCategory').validate().settings.ignore); 

// Set validator to NOT ignore hidden selects 
$('#frm_editCategory').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Warum input:visible und textarea:visible Sie müssen auch enthalten? Vorher sollte die Einstellung alle versteckten Eingaben ignorieren. Wenn Sie nur :not(select:hidden) ignorieren, würden Sie alle Eingaben ignorieren, die nicht ein verstecktes select sind. Dies ist zu auch zulässig, weil ein sichtbares input[type=text] ist nicht ein verstecktes select. Also würde es auch ignoriert werden.Was wir wollen, ist ein beliebiges Element zu ignorieren, die:

- is *not* a hidden `select` 
- *is* a hidden `input` 
- *is* a hidden `textarea` 

dies für alle in einen :not Selektor passen, möchten Sie ein beliebiges Element ignorieren, die:

- is *not* a hidden `select` 
- is *not* a visible `input` 
- is *not* a visible `textarea` 

Deshalb ...

$('#frm_editCategory').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Answer 3

Hier ist, was für mich einwandfrei funktionierte:

jQuery/javascript:

$(document).ready(function() { 
    $.validator.setDefaults({ 
     /*OBSERVATION: note how the ignore option is placed in here*/ 
     ignore: ':not(select:hidden, input:visible, textarea:visible)', 

     /*...other options omitted to focus on the OP...*/ 

     errorPlacement: function (error, element) { 
      if (element.hasClass('bs-select')) { 
       error.insertAfter('.bootstrap-select'); 
      } else { 
       error.insertAfter(element); 
      } 
      /*Add other (if...else...) conditions depending on your 
      * validation styling requirements*/ 
     } 
    }); 

    $('#myform').validate({ 
     rules: { 
      'year': { 
       required: true 
      } 
     }, 
     messages: { 
      'year': { 
       required: 'Please select a year from the dropdown' 
      } 
     } 
    }); 
}); 

HTML:

<select class="input-medium bs-select required"> 
    <option value="">Select Category</option> 
    <option>Innovation</option> 
    <option>Reusable Components</option> 
    <option>BU Connects</option> 
</select> 

Erläuterung:

OBSERVATION: Basierend auf @Alvin Lee ‚s Antwort dieEinstellungOptionen auf dem Formularelement wie folgt war in Ordnung, hatte aber seine Vorbehalte;

$('#myform').validate().settings.ignore = 
    ':not(select:hidden, input:visible, textarea:visible)'; 

Das Problem: Das Bootstrap-select-Element validiert wurde gezeigt, aber die Standardnachricht This field is required auf jedem anderen Eingabeelement anstelle der überwiegenden es mit allen benutzerdefinierten Validierung Nachrichten, die zuvor konfiguriert wurden.

Das Update: die ignore Einstellung in $.validator.setDefaults({...}) Block bewegen ... Das sollte es tun!

Answer 4

ist hier einfache Lösung, die für mich gearbeitet:

var validator = $('#frm_editCategory').validate({ 
    . 
    . 
    . 
}); 

$('select.input-medium').on('change', function() { 
    validator.element($(this)); 
}); 

Das ist es