Kiểm tra xem các tệp được yêu cầu có được chọn trong "hàng" chọn

Question

Tôi có nhiều lựa chọn trong biểu mẫu hay không và tôi cần kiểm tra với jQuery rằng ít nhất tất cả các trường bắt buộc (required="true") đều được chọn.

Something như thế này:

<select class="check" name="first"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select class="check" name="second"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select class="check" name="third"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 
<select name="other"> 
    <option value="some" required="true">Some required</option> 
    <option value="other">Other Value</option> 
    <option value="few" required="true">Few required</option> 
</select> 

tôi cần phải rà soát tất cả các yếu tố chọn có lớp chứa .check và chắc chắn rằng tất cả các trường bắt buộc được giao.

Tôi đã nghĩ đến việc tiếp tục như sau.

1. Thực hiện một mảng của tất cả các giá trị yêu cầu:

   var requiredFields = []; 
   $('option:selected', this).attr('required').each(function(){ 
       requiredFields.push($(this).val()); 
   }) 
   

2. Thực hiện một mảng của tất cả các giá trị được chọn:

   var valuesSelected = []; 
   $('.check').each(function(){ 
       valuesSelected.push($(this).val()); 
   }) 
   

3. Kiểm tra xem các trường bắt buộc là trong giá trị được chọn mảng, nếu không làm điều gì đó:

   for(i=0;i<requiredFields;i++){ 
       if(jQuery.inArray(requiredFields[i], valuesSelected)==-1){ 
        var error += 'Please select '+requiredFields[i]; 
       } 
   } 
   

4. Hiện thông báo lỗi, hoặc nếu có sản phẩm nào làm điều gì đó:

   if(error!=''){ 
       alert(error); // just for testing 
   } else { 
       // have fun 
   } 
   

Tôi đã đưa ra một đơn giản jsFiddle để kiểm tra nó, nhưng có vẻ như tôi phải làm gì đó sai, bất kỳ sự giúp đỡ?

Answer 1

Heres một cách để làm điều đó với bản đồ http://jsfiddle.net/4vNcU/4/

$(document).on('click', '.check-select', function() { 
var error = $(".check").find("option:selected").map(collectErrors); 
for (var i = 0; i < error.length; i++) { 
    alert(error[i]); 
} 
}); 

function collectErrors() { 
    if ($(this).attr("required") == undefined) { 
     var $parent = $(this).parent(); 
     return "Please select one of the folowing:" + 
     findRequired($parent) + 
     " For the select box " + $parent.attr("name"); 
    } 
} 

function findRequired($parent) { 
    return $parent.find("option[required=true]").map(function() { 
     return $(this).text(); 
    }).toArray().join() 
} 

Answer 2

Bạn không tạo mảng hoặc thêm phần tử vào mảng giống như trong javascript.

Thay

var requiredFields = array(); 

với

var requiredFields = []; 

và

requiredFields[]=$(this).val(); 

với

requiredFields.push($(this).val()); 

Answer 3

Tìm thấy sự giải pháp, tôi đã có nhiều điều sai trái:

var requiredFields = []; 
    $(form).find('option[required]').each(function(){ 
     if(jQuery.inArray($(this).html(), requiredFields)==-1){ 
      requiredFields.push($(this).html()); 
     } 
    }) 
    var valuesSelected = []; 
    $(form).find('option:selected').each(function(){ 
     valuesSelected.push($(this).html()); 
    }) 
    for(i=0;i<requiredFields.length;i++){ 
     if(jQuery.inArray(requiredFields[i], valuesSelected)==-1){ 
      var msgErr2 = msgErr2 + 'Please select '+requiredFields[i]+'<br>'; 
     } 
    } 

Điều này hoạt động tốt, hy vọng nó sẽ giúp ai đó!