Sprawdź, czy wymagane pola są zaznaczone w wybranym "wierszu"

Question

Mam wiele wyborów w formularzu, i muszę sprawdzić za pomocą jQuery, że zostały wybrane co najmniej wszystkie wymagane pola (required="true").

coś takiego:

<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> 

muszę sprawdzić wszystkie wybierz elementy, których klasa zawiera .check i upewnić się, że wszystkie wymagane pola są przypisane.

Myślałem o postępowaniu w następujący sposób.

1. Złóż tablicę wszystkich wymaganych wartości:

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

2. Złóż tablicę wszystkich wybranych wartości:

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

3. Sprawdź, czy wymagane pola są w wybranych wartości tablica, jeśli nie, coś:

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

4. Pokaż komunikat o błędzie, czy pusty robi coś:

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

mam znosić prosty jsFiddle go przetestować, ale wydaje się, że należy zrobić coś złego, żadnej pomocy?

Answer 1

Herezje sposób to zrobić z mapami 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

Nie tworzysz tablic ani nie dodajesz elementu do tablicy w javascript.

wymienić

var requiredFields = array(); 

z

var requiredFields = []; 

i

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

z

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

Answer 3

Okazało się rozwiązanie, miałem wiele rzeczy zrobionych źle:

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>'; 
     } 
    } 

Ten działa dobrze, mam nadzieję, że pomaga komuś!