валидиране на jquery с персонализиран стил ‹select›

Направих регистрация с помощта на jqueryValidation. Всичко щеше да е наред, но забелязах, че "избор" от bootstrap изглежда грозно в Opera и Mozilla Firefox. Използвах jquery-chosen, за да разреша проблема си, но тези два скрипта не искат да работят заедно. Границите не променят цвета си и съобщението за грешка няма да се покаже. Моля за помощ? Ето моят код:

<div class="form-group">     
     <select name="country" id="country" data-placeholder="YOUR COUNTRY*" class="chosen-select"  tabindex="2">                
                <option value=""></option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                ...
                <option value="Zimbabwe">Zimbabwe</option>
     </select>                
</div>

MyValidation js:

$(document).ready(function(){

        $('#contact-form').validate({
        rules: {         
          country:{
            required: true
          }
        },       

    highlight: function(element) {          
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');              
    },
    unhighlight: function(element) {            
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');              
    }
      });
});

и персонализирано падащо меню js:

<script src="js/chosen.jquery.js" type="text/javascript"></script>  
  <script type="text/javascript">
    var config = {
      '.chosen-select' : {}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>

jquery select jquery-validate jquery-chosen
person T_E_M_A    schedule 14.12.2014    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Проблемът е, че плъгинът, избран от jquery, скрива избрания елемент и изгражда своя персонализиран html, за да го имитира.

При това плъгинът за валидиране на jquery игнорира скритите елементи по подразбиране и не ги валидира

Можете да зададете свойството ignore за валидатора при инициализиране и да го принудите да не игнорира нищо:

$('#contact-form').validate({
    ignore: [],
    //your other validation settings
});
person paulitto    schedule 14.12.2014
comment
Благодаря ти! Разбрах. Това помогна. Но съобщението за грешка се отпечатва не под полето, както обикновено, то се отпечатва над полето. Не разбирам защо и как да го поправя...и цветът на рамката не се променя на червено при грешка - person T_E_M_A; 14.12.2014
comment
@T_E_M_A, ще трябва да се обърнете към документацията за jQuery Validate и да прочетете за функцията за обратно извикване errorPlacement. Използвайте тази опция, за да поставите точно етикета за грешка. - person Sparky; 14.12.2014
comment
@Sparky, преди да добавя скрипта за dropdownlist, всичко работеше както трябва. Този скрипт по някакъв начин промени местоположението на изходната грешка... Може би трябва да се поправи? - person T_E_M_A; 15.12.2014
comment
@T_E_M_A, приставката по подразбиране поставя етикета за грешка след елемента select. Както е обяснено в отговора на paulitto по-горе, Chosen скрива действителния select и създава свой собствен падащ списък, за който плъгинът за валидиране не знае нищо. Validate все още правилно поставя съобщението за грешка след елемента select, но тъй като е скрито, изглежда не е на място. Ето защо ще трябва да го коригирате с помощта на опцията errorPlacement. - person Sparky; 15.12.2014
comment
@T_E_M_A, Вижте: stackoverflow.com/a/24834289/594235 - person Sparky; 15.12.2014