5

フォームに複数の選択項目があり、少なくともすべての必須フィールド ( required="true") が選択されていることを jQuery で確認する必要があります。

このようなもの：

<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 に答える