Question

我正在尝试阻止jQuery Validation插件验证是否使用$（“＃form_id”）选择了某个表单选项（仅限电话）。规则（“remove”，“required”）;功能，但它不起作用......

当我只选择手机时，我得到的只是一个javascript错误：“TypeError：表达式'F'[undefined]的结果不是对象，表单将不会提交，因为它仍在验证必填字段。

//field validation
$('#location').change(function(){
    location_val = $('#location').val();

    if (location_val == "select") {
        $('.hide').hide();
    }
    else if (location_val == "my_location") {
        $('.hide').hide();
        $('#f_address, #f_address2, #f_city, #f_state_zip, #f_phone').customFadeIn('fast');
        $("#step2").rules("add", "required");
    }
    else if (location_val == "customers_location") {
        $('.hide').hide();
        $('#f_area, #f_phone, #f_city, #f_state_zip').customFadeIn('fast');
        $("#step2").rules("add", "required");
    }
    else if (location_val == "both") {
        $('.hide').hide();
        $('#f_area, #f_address, #f_address2, #f_city, #f_state_zip, #f_phone').customFadeIn('fast');
        $("#step2").rules("add", "required");
    }
    else if (location_val == "phone") {
        $('.hide').hide();
        $('#f_phone').customFadeIn('fast'); 
        $("#step2").rules("remove", "required");

    }
});

$("#step2").validate({
    rules: {
        city: {required: true},
        state: {required: true},
        zip: {required: true}
    }
});

见解赞赏。

Answer 1

我完成此任务的方法是使用与验证规则集不同的CSS类。因此，对于通常“需要”的字段，我使用'requirement'CSS类生成元素。然后我在页面中添加：

function addRequired() {
    $('.requirement').each(function() {
        $(this).rules("add", {required: true});
    });
}

function removeRequired() {
    $('.requirement').valid(); // can't remember why I have this, but it's in source control now for awhile...
    $('.requirement').each(function() {
        $(this).rules("remove");
    });
}

$(document).ready(function() {
    $('form').validate({...});
    addRequired();
});

然后在你的触发表单元素（在你的情况下看起来像一个单选按钮）上挂钩一些行为，当它被选中时，调用addRequired()。当它不再被选中时，请拨打removeRequired()。显然，考虑到后端的不同验证选项。

即时删除jQuery验证

1 个答案: