jquery validate kiểm tra ít nhất một hộp kiểm

Question

Tôi có một cái gì đó như thế này:

<form> 
<input name='roles' type='checkbox' value='1' /> 
<input name='roles' type='checkbox' value='2' /> 
<input name='roles' type='checkbox' value='3' /> 
<input name='roles' type='checkbox' value='4' /> 
<input name='roles' type='checkbox' value='5' /> 
<input type='submit' value='submit' /> 
<form> 

Tôi muốn xác nhận rằng ít nhất một hộp kiểm (vai trò) nên được kiểm tra, là nó có thể với jquery.validate?

Answer 1

Plugin xác thực sẽ chỉ xác thực phần tử hiện tại/tiêu điểm.Trước khi bạn cần phải thêm quy tắc tùy chỉnh vào trình xác thực để xác thực tất cả các hộp kiểm. Tương tự như câu trả lời ở trên.

$.validator.addMethod("roles", function(value, elem, param) { 
    if($(".roles:checkbox:checked").length > 0){ 
     return true; 
    }else { 
     return false; 
    } 
},"You must select at least one!"); 

Và trên phần tử:

<input class='{roles: true}' name='roles' type='checkbox' value='1' /> 

Bên cạnh đó, bạn sẽ có khả năng tìm việc hiển thị thông báo lỗi, không hoàn toàn đầy đủ. Chỉ 1 hộp kiểm được tô sáng và chỉ hiển thị 1 tin nhắn. Nếu bạn nhấp vào một hộp kiểm riêng biệt khác, hộp kiểm này sau đó sẽ trả lại giá trị cho hộp kiểm thứ hai, hộp kiểm gốc vẫn được đánh dấu là không hợp lệ và thông báo lỗi vẫn hiển thị, mặc dù biểu mẫu hợp lệ. Tôi luôn phải sử dụng để chỉ hiển thị và ẩn các lỗi trong bản xác thực case.The này, sau đó chỉ xử lý việc không gửi biểu mẫu.

Tùy chọn khác bạn có là viết một hàm sẽ thay đổi giá trị của đầu vào bị ẩn thành "hợp lệ" trên hộp kiểm và sau đó đính kèm quy tắc xác thực vào phần tử bị ẩn. Tuy nhiên, điều này sẽ chỉ xác thực trong sự kiện onSubmit, nhưng sẽ hiển thị và ẩn thư vào các thời điểm thích hợp. Đó là những tùy chọn duy nhất mà bạn có thể sử dụng với plugin xác thực.

Hy vọng điều đó sẽ hữu ích!

Answer 2

Mmm đầu tiên thuộc tính id của bạn phải là duy nhất, mã của bạn có khả năng là

<form> 
<input class='roles' name='roles' type='checkbox' value='1' /> 
<input class='roles' name='roles' type='checkbox' value='2' /> 
<input class='roles' name='roles' type='checkbox' value='3' /> 
<input class='roles' name='roles' type='checkbox' value='4' /> 
<input class='roles' name='roles' type='checkbox' value='5' /> 
<input type='submit' value='submit' /> 
</form> 

Đối với vấn đề của bạn:

if($('.roles:checkbox:checked').length == 0) 
    // no checkbox checked, do something... 
else 
    // at least one checkbox checked... 

NHƯNG, hãy nhớ rằng một hình thức hoạt Javascript xác nhận là chỉ biểu hiện, tất cả xác nhận PHẢI được thực hiện phía máy chủ.

Answer 3

Ví dụ từ https://github.com/ffmike/jquery-validate

<label for="spam_email"> 
    <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label> 
<label for="spam_phone"> 
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label> 
<label for="spam_mail"> 
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label> 
<label for="spam[]" class="error">Please select at least two types of spam.</label> 

Cùng mà không trường "Validate" trong thẻ chỉ sử dụng javascript:

$("#testform").validate({ 
    rules: { 
      "spam[]": { 
        required: true, 
        minlength: 1 
      } 
    }, 
    messages: { 
      "spam[]": "Please select at least two types of spam." 
    } 
}); 

Và nếu bạn cần tên khác nhau cho đầu vào, bạn có thể sử dụng somethig như thế này:

<input type="hidden" name="spam" id="spam"/> 
<label for="spam_phone"> 
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label> 
<label for="spam_mail"> 
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label> 

Javascript:

$("#testform").validate({ 
    rules: { 
     spam: { 
      required: function (element) { 
       var boxes = $('.checkbox'); 
       if (boxes.filter(':checked').length == 0) { 
        return true; 
       } 
       return false; 
      }, 
      minlength: 1 
     } 
    }, 
    messages: { 
      spam: "Please select at least two types of spam." 
    } 
}); 

Tôi đã gia tăng đầu vào ẩn trước khi đầu vào và đặt nó vào "đòi hỏi" nếu không có hộp kiểm chọn

Answer 4

Đây là cách tôi đã xử lý với nó trong quá khứ:

$().ready(function() {              
    $("#contact").validate({ 
     submitHandler: function(form) { 
      // see if selectone is even being used 
      var boxes = $('.selectone:checkbox'); 
      if(boxes.length > 0) { 
       if($('.selectone:checkbox:checked').length < 1) { 
        alert('Please select at least one checkbox'); 
        boxes[0].focus(); 
        return false; 
       } 
      } 
      form.submit(); 
     } 
    }); 

}); 

Answer 5

làm chắc chắn rằng input-name[] nằm trong dấu phẩy ngược trong ruleset.Đã cho tôi giờ để tìm ra phần đó.

$('#testform').validate({ 
    rules : { 
    "name[]": { required: true, minlength: 1 } 
    } 
}); 

đọc thêm ở đây ... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

Answer 6

$("#idform").validate({ 
    rules: {    
     'roles': { 
      required: true, 
     }, 
    }, 
    messages: {    
     'roles': { 
      required: "One Option please", 
     }, 
    } 
}); 

Answer 7

Đó là nhiều khả năng là bạn muốn có một văn bản bên cạnh hộp kiểm. Trong trường hợp đó, bạn có thể đặt các hộp kiểm bên trong một nhãn như tôi làm dưới đây:

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label> 
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label> 

Vấn đề là khi được thông báo lỗi được hiển thị, nó sẽ được chèn vào sau hộp kiểm nhưng trước khi các văn bản, làm cho nó không đọc được. Để khắc phục điều đó, tôi đã thay đổi chức năng đặt lỗi:

if (element.is(":checkbox")) { 
    error.insertAfter(element.parent().parent()); 
} 
else { 
    error.insertAfter(element); 
} 

Nó phụ thuộc vào bố cục của bạn nhưng điều tôi làm là có vị trí lỗi đặc biệt cho điều khiển hộp kiểm. Tôi nhận được phụ huynh của hộp kiểm, đó là một nhãn, và sau đó tôi nhận được phụ huynh của nó, đó là một div trong trường hợp của tôi. Bằng cách này, lỗi được đặt bên dưới danh sách các điều khiển hộp kiểm.

Answer 8

sir_neanderthal đã đăng câu trả lời hay.

Tôi chỉ muốn chỉ ra rằng nếu bạn muốn sử dụng tên khác nhau cho đầu vào của bạn, bạn cũng có thể sử dụng (hoặc chỉ cần sao chép các phương pháp) require_from_group method từ chính thức jQuery Validation thêm-methods.js (link to CDN for version 1.13.1) .