0

我正在验证网页的两个部分，第一个验证部分验证但第二个验证器不是出于某种原因。

$(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);

});

/ * ***第二次验证不起作用** * *** /

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

<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

<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 值只能在文档中使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

也就是说，您在中的选择$('#form #zip').change(kVal.zip);不会使用#formfind下的层次结构#zip，它仍然会在整个 DOM 中找到第一个实例。

于 2012-10-16T04:34:32.987 回答