0

Web ページの 2 つのセクションを検証していますが、最初の検証セクションは検証しますが、2 番目の検証セクションは何らかの理由で検証しません。

$(function(){



/* first validation - works*/
jVal = {
    //validate firstName
    'firstName': function(){

        //appends #firstNameInfo with .info to body
        $('body').append('<div id="firstNameInfo" class="info"></div>');

        //create variables
        var firstNameInfo = $('#firstNameInfo');
        var ele = $('#firstName');

        var patt = /^[a-zA-Z][a-zA-Z]{1,20}$/; 

        if(!patt.test(ele.val())) {
            jVal.errors = true;
            firstNameInfo.removeClass('correct').addClass('error');
            ele.removeClass('normal').addClass('wrong');
        }else{
            firstNameInfo.removeClass('error').addClass('correct');
            ele.removeClass('wrong').addClass('normal');
        }
    },

    //validate lastName
    'lastName': function() {

        $('body').append('<div id="lastNameInfo" class="info"></div>');

        var lastNameInfo = $('#lastNameInfo');
        var ele =$('#lastName');

        var patt = /^[a-zA-Z][a-zA-Z]{1,20}$/;

        if(!patt.test(ele.val())){
            jVal.errors = true;
                lastNameInfo.removeClass('correct').addClass('error');
                ele.removeClass('normal').addClass('wrong');
        }else{
            lastNameInfo.removeClass('error').addClass('correct');
            ele.removeClass('wrong').addClass('normal');
        }
    },
    //validate phone

    'phone' : function(){
        $('body').append('<div id="phoneInfo" class="info"></div>');

        var phoneInfo = $('#phoneInfo');
        var ele = $('#phone');

        var patt = /^((\+?1-)?\d\d\d-)?\d\d\d-\d\d\d\d$/;

        if(!patt.test(ele.val())) {
            jVal.errors = true;
            phoneInfo.removeClass('correct').addClass('error');
            ele.removeClass('normal').addClass('wrong');
        }else{
            phoneInfo.removeClass('error').addClass('correct');
            ele.removeClass('wrong').addClass('normal');
        }
    },

    //validate zipcode 
    'zip' : function() {
        $('body').append('<div id="zipInfo" class="info"></div>');

        var zipInfo = $("#zipInfo");
        var ele = $('#content_form #zip');

        var patt = /^\d\d\d\d\d$/;

        if(!patt.test(ele.val())){
            jVal.errors = true;
                zipInfo.removeClass('correct').addClass('error');
                ele.removeClass('normal').addClass('wrong');
        }else{
            zipInfo.removeClass('error').addClass('correct');
            ele.removeClass('wrong').addClass('normal');
        }
    },
    //submit button code
    'sendForm':function(){
        if(!jVal.errors){
            $('#content_form').submit();
        }
    },
};

$('#content_form #submit').click(function(){
    var obj = $.browser.webkit ? $('body') : $('html');
    jVal.errors = false;
    jVal.firstName();
    jVal.lastName();
    jVal.phone();
    jVal.zip();
    jVal.sendForm();

return false;

$('#firstName').change(jVal.firstName);
$('#lastName').change(jVal.lastName);
$('#email').change(jVal.email);
$('#content_form #zip').change(jVal.zip);

});

/ * ***2 回目の検証が機能しない** * *** /

kVal ={

    'zip' : function() {
        $('body').append('<div id="Infozip" class="info"></div>');

        var Infozip = $("#Infozip");
        var ele = $('#form #zip');

        var patt = /^\d\d\d\d\d$/;

        if(!patt.test(ele.val())){
            kVal.error = true;
                Infozip.removeClass('correct').addClass('error');
                ele.removeClass('normal').addClass('wrong');
        }else{
            Infozip.removeClass('error').addClass('correct');
            ele.removeClass('wrong').addClass('normal');
        }
    },
    //submit button code
    'send':function(){
        if(!kVal.errors){
            $('#form').submit();
        }
    },
};

$('#form button#submit').click(function(){
    var obj = $.browser.webkit ? $('body') : $('html');
    kVal.errors = false;
    kVal.zip();
    kVal.send();

return false;


$('#form #zip').change(kVal.zip);
});


}); /*main function closer*/

最初の検証のための HTML -WORKING -

<div id="content_form">
            <p>
                <label class="block">
                    <input type="text" id="firstName" type="firstName" autocomplete="on" value="first name">
                </label>
                <label class="block">
                    <input type="text" id="lastName" type="lastName" autocomplete="on" value="last name">
                </label>
                <label class="block">
                    <input type="text" id="phone" type="phone" autocomplete="on" value="phone">
                </label>
                <label class="block">
                    <input type="text" id="zip" type="zip" autocomplete="on" value="zip code">
                </label> 
                <button type="submit" id="submit" value="Submit" title="submit">submit</button>
            </p>
        </div><!-- end form -->

HTML FOR SECOND 検証

<div id="form">
            <p>
                <label class="block">
                    <input type="text" id="zip" type="zip" autocomplete="on" value="zip code">
                </label> 
                <button type="submit"  id="submit" value="CHECK NOW" title="check now">check now</button>
            </p>        
        </div><!-- end form -->
4

1 に答える 1

0

idおそらく問題を引き起こしている両方のzipフィールドで同じです。jQuery#idセレクターのドキュメントには、次のように書かれています。

各 id 値は、ドキュメント内で 1 回だけ使用する必要があります。複数の要素に同じ ID が割り当てられている場合、その ID を使用するクエリは、DOM で最初に一致した要素のみを選択します。ただし、この動作に依存するべきではありません。同じ ID を使用する複数の要素を持つドキュメントは無効です。

つまり、 での選択はfind$('#form #zip').change(kVal.zip);の下の階層を使用せず、DOM 全体で最初のインスタンスを検索します。#form#zip

于 2012-10-16T04:34:32.987 に答える