5

我在一个表单中有多个选择，我需要使用 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并确保分配了所有必填字段。

我正在考虑如下进行。

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

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

  2. 创建一个包含所有选定值的数组：

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

  3. 检查必填字段是否在选定的值数组中，如果没有，请执行以下操作：

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

  4. 显示错误消息，或者如果为空则执行某些操作：

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

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

4

3 回答 3

0

您不会像在 javascript 中那样创建数组或将元素添加到数组中。

代替

var requiredFields = array();

和

var requiredFields = [];

和

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

和

requiredFields.push($(this).val());
于 2013-02-08T20:10:17.590 回答
0

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

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

这个工作正常，希望对某人有所帮助！

于 2013-02-08T21:08:41.947 回答
0

这是一种使用地图的方法 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()
}
于 2013-02-08T21:13:01.100 回答