web-dev-qa-db-ja.com

jQuery同じ名前の複数のフィールドを検証します

同じ名前で同じ（インクリメンタル）IDの入力を持つこのフォームがあります。

人物に名前があるかどうかをフォームで検証したいのですが、年齢は必須です。

ここで何が起こるかというと、最初の入力だけが必須です。

これが私のコードです：

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
    <form id="people">
        <div class="section">
            <input id="person1" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age1" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person2" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age2" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person3" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age3" name="age" class="age" type="text" placeholder="Age" />
        </div>
        ...
        <input type="submit" id="submit" name="submit" value="Add" />
    </form>
    <script type="text/javascript">
        $(function(){
            $('#people').validate();
            $('#submit').click(function(){
                $('[id^="person"]').each(function(){
                    if ($(this).val().length>0){
                        //alert($(this).val());
                        //alert($(this).parent().find('.age').val());
                        $(this).rules('add', {
                            required: true,
                            minlength: 2,
                            messages: {
                                required: "Specify the person name",
                                minlength: "Minimum of 2 characters"
                            }
                        });
                        $(this).parent().find('.age').rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Must have an age",
                                number: "Specify a valid age"
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>
jqueryjquery-validate
12
Francisco Costa

JQuery Validatorプラグインは、すぐに使用できる同じ名前の複数のフィールドをサポートしていません。プラグインのソースを編集して、フィールドを希望どおりにチェックする必要があります。

回避策については、同様の質問の この回答 を参照してください。

13
Chris T

友達！

同じ名前のテキストボックスを検証するには、以下を使用してください。さらに、入力パラメーターを配列として宣言する必要はありません。

ここで、「minVal」はテキストボックスの名前です。同様に、ドロップダウンには「document.getElementsByTagName（ "select"）;」を使用します。

function validateMinimumVal(){
    inp = document.getElementsByTagName("TEXT");
    for ( var i = 0; i < inp.length; ++i )    {
        if (inp[i].name =="minVal" && inp[i].value==''){
            alert('plesae Add a MINIMUM VALUE!!');
                return false;
            }
        }
    return true;
 }

お役に立てれば！！ジャガン

0
Jagan