Question

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

$(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 for FIRST Validation -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 Validation

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

Answer 1

两个zip字段都有相同的id，这可能会导致您的问题。 the jQuery #id selector的文档可以这样说;

每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。

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

jQuery Validator不适用于上层验证

1 个答案: