Geek asks and answers

Check if the required values ​​are selected in the row selection,

I have several selections in the form, and I need to check with jQuery that at least all required fields ( required="true") are selected .

Something like that:

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

I need to check all select elements whose class contains .checkand make sure that all required fields are assigned.

I thought of the following:

  • Create an array of all the necessary values:

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

  • Create an array of all the selected values:

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

  • Check if the required fields are in the selected array of values ​​if you are not doing anything:

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

  • Show error message, or if something is empty:

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

I checked a simple jsFiddle , but it seems like I should be doing something wrong, any help?

+5
source share
3

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()
}
0

, javascript.

var requiredFields = array();


var requiredFields = [];


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


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

Found a solution, I had a lot of things wrong:

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

This works well, hope this helps someone!

0
source

More articles:


All Articles