Question

我在表单中有多个选项，我需要使用jQuery检查至少选择了所有必填字段（required="true"）。

这样的事情：

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

我需要检查其类包含.check的所有select元素，并确保已分配所有必填字段。

我正在考虑如下进行。

创建一个包含所有必需值的数组：

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

创建所有选定值的数组：

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

检查所需字段是否在所选值数组中，如果不执行某些操作：

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

显示错误消息，或者如果为空则执行以下操作：

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

我已经设置了一个简单的jsFiddle来测试它，但似乎我一定做错了什么，有什么帮助吗？

Answer 1

您不会在javascript中创建数组或向数组中添加元素。

替换

var requiredFields = array();

带

var requiredFields = [];

和

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

与

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

Answer 2

找到解决方案，我做了很多错事：

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

这个工作得很好，希望它可以帮助别人！

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

检查所选“行”中是否选择了必填字段

3 个答案: