Проверка флажков состояния с помощью jQuery Validator

Question

Я использую плагин проверки формы jQuery. Форма имеет 5 флажков. Первый из которых (мастер), если он установлен, проверяет оставшиеся 4 и делает их неизменными пользователем. Если мастер не отмечен, оставшиеся 4 окна возвращаются к тому, чтобы пользователь мог его выполнить. Эта функциональность работает нормально. Теперь, что я хочу сделать, если все флажки не отмечены, аннулируйте форму. Я также хочу, чтобы одна конкретная область (checkBoxErrorHolder) содержала сообщение об ошибке проверки только для флажков. Другие сообщения об ошибках должны появляться в их положениях по умолчанию по их входам. Вот что у меня есть до сих пор:

<script language="javascript"> 
$(function() { 
    $.validator.addMethod("validateCheckBoxes", 
          function (value, element, params) { 

           var master=false, 
            slave1=false, 
            slave2=false, 
            slave3=false, 
            slave4=false; 

           if ($("#master").attr("checked")) 
            master = true; 
           if ($("#slave1").attr("checked")) 
            slave1 = true; 
           if ($("#slave2").attr("checked")) 
            slave2 = true; 
           if ($("#slave3").attr("checked")) 
            slave3 = true; 
           if ($("#slave4").attr("checked")) 
            slave4 = true; 

           return (master || (slave1&&slave2&&slave3&&slave4)); 
          }, 
          "One or more check boxes must be checked"); 

    $("#theForm").validate({ 
     rules: { 
        first: required, 
        last: required, 
        email: {required: true, email: true}, 
        master: { required: true, 
          validateCheckBoxes: true}, 
          errorPlacement: function(error, element) { 
               $("#checkBoxErrorHolder").html(error); 
              } 
          } 
        slave1: { required: true, 
          validateCheckBoxes: true}, 
          errorPlacement: function(error, element) { 
               $("#checkBoxErrorHolder").html(error); 
              } 
          } 
        slave2: { required: true, 
          validateCheckBoxes: true}, 
          errorPlacement: function(error, element) { 
               $("#checkBoxErrorHolder").html(error); 
              } 
          } 
        slave3: { required: true, 
          validateCheckBoxes: true}, 
          errorPlacement: function(error, element) { 
               $("#checkBoxErrorHolder").html(error); 
              } 
          } 
        slave4: { required: true, 
          validateCheckBoxes: true, 
          errorPlacement: function(error, element) { 
               $("#checkBoxErrorHolder").html(error); 
              } 
          } 
       }, 
     messages: { 
      first: "required", 
      last: "required", 
      email: { 
         required: "Email address required", 
         email: "Please supply a valid email address" 
        } 
     } 
    }); 
}); 
</script> 

<form id="theForm" ...> 
<input type="text" name="first" value="" /> 
<input type="text" name="last" value="" /> 
<input type="text" name="email" value="" /> 
<input type="checkbox" id="master" value="master" class="validateCheckBoxes"/> 
<input type="checkbox" id="slave1" value="slave1" class="validateCheckBoxes"/> 
<input type="checkbox" id="slave2" value="slave2" class="validateCheckBoxes"/> 
<input type="checkbox" id="slave3" value="slave3" class="validateCheckBoxes"/> 
<input type="checkbox" id="slave4" value="slave4" class="validateCheckBoxes"/> 
<input type="submit" /> 
</form> 
<div id="checkBoxErrorHolder"></div> 

Излишне говорить, что я не получаю ожидаемых результатов.

Answer 1

Ваш код:

rules: { 
       first: required, 
       last: required, 
       email: {required: true, email: true}, 
       master: { required: true, 
         validateCheckBoxes: true}, 
         errorPlacement: function(error, element) { 
              $("#checkBoxErrorHolder").html(error); 
             } 
         } // <-- missing comma 
       slave1: { required: true, 
         validateCheckBoxes: true}, 
         errorPlacement: function(error, element) { 
              $("#checkBoxErrorHolder").html(error); 
             } 
         } // <-- missing comma 

в принципе, вы сломали плагин с помощью различных синтаксических и форматирования ошибок ...

---

1)errorPlacement является не правилом, что вы подаете заявление вместе с другими правилами. It's a callback function that you apply once along with the other options ...

$(document).ready(function() { 

    $("#theForm").validate({ 
     rules: { 
      // your rules 
     }, 
     messages: { 
      // your messages 
     }, 
     errorPlacement: function (error, element) { 
      $("#checkBoxErrorHolder ").html(error); 
     }, 
     // other options and callback functions, 
    }); 

}); 

---

2) ваших checkbox элементов отсутствует атрибут name. Каждый вход, выбор, радио, флажок и т. Д., За исключением кнопки отправки, должен иметь атрибут name, чтобы этот плагин функционировал правильно.

---

3) Всякий раз, когда вы используете сокращенную для правила, как required, оно должно быть в кавычках. Вот пример, показывающий оба способа правильно ...

rules: { 
    first: "required", 
    last: { 
     required: true 
    }, 
}, 

---

4) Я начал строительство jsFiddle для этого , но я остановился, потому что есть слишком много ошибок синтаксиса, чем я забочусь, чтобы исправить. Пожалуйста, запустите свой JavaScript через jsHiddle функцию jsFiddle, чтобы увидеть их все. Я получил вашу основную валидацию , так что теперь вы можете устранить неполадки в своем методе validateCheckBoxes.

Вот рабочий jsFiddle Демо вашей основной формы: http://jsfiddle.net/gHKyb/

---

5) EDIT: Я еще раз посмотрел на свой метод пользовательских validateCheckBoxes и очищены последний из синтаксических ошибок. Но он все еще не работал, потому что вы случайно определили правило required на каждом флажке, что просто означает, что флажок всегда требуется, несмотря ни на что другое.

Я удалил правило required из всех флажков, и все, кажется, работает сейчас согласно вашей спецификации. Я также сократил ваш код. (Либо первая коробка должна быть проверена или четыре последних должно быть проверено)

$.validator.addMethod("validateCheckBoxes", function (value, element, params) { 
    var master, 
     slave = []; 
    if ($("#master").attr("checked")) { 
     master = true; 
    } 
    $("[id^='slave']").each(function(i) { 
     if ($(this).attr("checked")) { 
      slave[i+1] = true; 
     } 
    }); 
    return (master || (slave[1] && slave[2] && slave[3] && slave[4])); 
}, "One or more check boxes must be checked"); 

---

6) И, наконец, зафиксировать расположение ярлыков ошибок, я просто изменил функцию errorPlacement обратного вызова в качестве следующим образом:

errorPlacement: function (error, element) { 
    if ($(element).attr("type") === "checkbox") { 
     $("#checkBoxErrorHolder").html(error); // just for checkboxes 
    } else { 
     error.insertAfter(element); // default placement 
    } 
}, 
success: function() { // need "success" to dynamically clear any checkbox errors 
    $("#checkBoxErrorHolder").html(); 
}, 

Рабочей DEMO: http://jsfiddle.net/AKgmH/

Answer 2

Кажется, как "отсутствует после каждого„проверил“

if ($("#master").attr("checked")) 
    master = true; 
if ($("#slave1").attr("checked")) 
    slave1 = true; 
if ($("#slave2").attr("checked")) 
    slave2 = true; 
if ($("#slave3").attr("checked")) 
    slave3 = true; 
if ($("#slave4").attr("checked")) 
    slave4 = true; 

Я не знаю, если это решит вашу проблему, но это может помочь :)