jQuery Потрібна перевірка Виберіть


146

Я намагаюся перевірити html-елемент вибору за допомогою плагіна jQuery Validate. Я встановив правило "обов'язкове" значення true, але воно завжди проходить перевірку, оскільки нульовий індекс вибирається за замовчуванням. Чи є спосіб визначити порожнє значення, яке використовується необхідним правилом?

UPD. Приклад. Уявіть, у нас є такий html-контроль:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Я хочу, щоб плагін Validation використовував значення "за замовчуванням" як порожнє.


Покладіть фрагмент коду, щоб ми могли допомогти.
Лі

Відповіді:


213

Ви можете написати своє правило!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

1
Ви можете перевірити вибраний текст замість значення, як це:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
Pablo SG Пачеко

11
Щоб допомогти майбутнім читачам: Де сказано SelectName, це означає значення атрибута name, а не значення атрибута id. Це трохи заплутано, оскільки при роботі в JS зазвичай працює ідентифікатор, а не ім'я. Дивіться тут документацію : "правила (за замовчуванням: правила читаються з розмітки (класи, атрибути, дані)) Тип: Об'єктні пари ключ / значення, що визначають спеціальні правила. Ключ - це ім'я елемента"
Dror

239

Тут було окреслено простіше рішення: Підтвердити поле вибору

Зробіть значення порожнім і додайте необхідний атрибут

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

11
Але ви маєте надати вашому параметру порожнє значення - не завжди це можливо або підлягає суті
Muleskinner

4
Це не повинно бути прийнятою відповіддю, оскільки оригінальний плакат спеціально просить використовувати "правила", що є опцією, яка подається на валідаційний конструктор, а не присутня в розмітці. Іноді у вас немає розкоші змінювати розмітку. (І особисто я просто вважаю за краще не вкладати логіку в розмітку.)
Мейсон Хотц

3
@MasonHoutz це все-таки логіка в розмітці, чи очікує, що логіка очікує значення = "" або value = "за замовчуванням"
billrichards


30

використовувати правило min

встановіть перше значення параметра 0

'selectName':{min:1}

Перше значення зафіксовано (існує певна логіка доповнення проти цього значення)
SiberianGuy

9

Вам потрібно лише поставити validate[required]як клас цього вибору, а потім поставити параметр зі значенням = ""

наприклад:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

7

Я не знаю, яким чином був плагін, коли було задано питання (2010), але я зіткнувся з тією ж проблемою і сьогодні і вирішив це таким чином:

  1. Дайте атрибут імені атрибуту вибору тегу. Наприклад у цьому випадку

    <select name="myselect">

  2. Замість роботи з атрибутом value = "default" в опції тегу вимкніть параметр за замовчуванням або встановити значення = "", як запропонував Ендрю Коутс

    <option disabled="disabled">Choose...</option>

    або

    <option value="">Choose...</option>

  3. Встановіть правило перевірки плагіна

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    або

    <select name="myselect" class="required">

Obs: Рішення Andrew Coats працює лише у тому випадку, якщо у вас є лише один вибір. Якщо ви хочете, щоб його рішення працювало з більш ніж одним вибором, додайте атрибут імені до вибраного.

Сподіваюся, це допомагає! :)


1
коротше, додайте requiredатрибут до <select>тегу та додайте disabledатрибут до першого <option>тегу (або той, з selectedатрибутом, якщо такий є)
Stephen

4

Ось простий і зрозумілий приклад:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

значення вибору буде порожнім


2
Хоча цей фрагмент коду може вирішити питання, зокрема пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду. Будь ласка, намагайтеся не переповнювати свій код пояснювальними коментарями, це зменшує читабельність і коду, і пояснень!
Фільнор

1

Це просто, вам потрібно отримати значення поля Select, і воно не може бути "за замовчуванням".

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

1

Рішення згадується @JMP працював в моєму випадку з невеликою зміною: я використовую element.valueзамість valueв addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

Можливо, тут я маю особливий випадок, але не з'ясував причину. Але рішення @ JMP має працювати в регулярних випадках.


0

як перевірити вибір "kvalifica", у нього є 3 варіанти

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

3
Ласкаво просимо до переповнення стека! Дякуємо за цей фрагмент коду, який може надати деяку короткочасну допомогу. Правильне пояснення значно покращило б його довгострокове значення, показавши, чому це хороше рішення проблеми, та зробило б кориснішим майбутнім читачам інші подібні питання. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення, включаючи зроблені вами припущення.
Toby Speight
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.