Question

我使用以下代码进行表单验证。代码工作正常。这是代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function(){
        jQuery("#type").validate({
            expression: "if (VAL != '0') return true; else return false;",
            message: "Please make a selection"
        });

        jQuery("#type2").validate({
            expression: "if (VAL != '0')   return true; else return false;",
            message: "Please make a selection"
        });
    });
</script>

下拉框代码：

<select name="type" id="type">
    <option value="0">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select name="type2" id="type2">
    <option value="0">Selet an option</option>
    <option value="0">Select an option</option>
    <option value="'1">Option 1</option>
    <option value="'2">Option 2</option>
    <option value="'3">Option 3</option>
</select>

现在我想要的是第二个下拉框中的验证应该只在第一个下拉框中的选定项目是“选项2”时才有效，而对于其他选定的选项，第二个组合框中将没有验证。

jquery.validate.js：

(function (jQuery) {
    var ValidationErrors = new Array();
    jQuery.fn.validate = function (options) {
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_class: "ValidationErrors",
            error_field_class: "ErrorField",
            live: true
        }, options);
        var SelfID = jQuery(this).attr("id");
        var unix_time = new Date();
        unix_time = parseInt(unix_time.getTime() / 1000);
        if (!jQuery(this).parents('form:first').attr("id")) {
            jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
        }
        var FormID = jQuery(this).parents('form:first').attr("id");
        if (!((typeof (ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        if (options['live']) {
            if (jQuery(this).find('input').length > 0) {
                jQuery(this).find('input').bind('blur', function () {
                    if (validate_field("#" + SelfID, options)) {
                        if (options.callback_success)
                            options.callback_success(this);
                    }
                    else {
                        if (options.callback_failure)
                            options.callback_failure(this);
                    }
                });
                jQuery(this).find('input').bind('focus keypress click', function () {
                    jQuery("#" + SelfID).next('.' + options['error_class']).remove();
                    jQuery("#" + SelfID).removeClass(options['error_field_class']);
                });
            }
            else {
                jQuery(this).bind('blur', function () {
                    validate_field(this);
                });
                jQuery(this).bind('focus keypress', function () {
                    jQuery(this).next('.' + options['error_class']).fadeOut("fast", function () {
                        jQuery(this).remove();
                    });
                    jQuery(this).removeClass(options['error_field_class']);
                });
            }
        }
        jQuery(this).parents("form").submit(function () {
            if (validate_field('#' + SelfID))
                return true;
            else
                return false;
        });
        function validate_field(id) {
            var self = jQuery(id).attr("id");
            var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
            var validation_state = eval(expression);
            if (!validation_state) {
                if (jQuery(id).next('.' + options['error_class']).length == 0) {
                    jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>');


                    jQuery(id).addClass(options['error_field_class']);
                }
                if (ValidationErrors[FormID].join("|").search(id) == -1)
                    ValidationErrors[FormID].push(id);
                return false;
            }
            else {
                for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                    if (ValidationErrors[FormID][i] == id)
                        ValidationErrors[FormID].splice(i, 1);
                }
                return true;
            }
        }
    };
    jQuery.fn.validated = function (callback) {
        jQuery(this).each(function () {
            if (this.tagName == "FORM") {
                jQuery(this).submit(function () {
                    if (ValidationErrors[jQuery(this).attr("id")].length == 0)
                        callback();
                    return false;
                });
            }
        });
    };
})(jQuery);

有什么想法吗？

Answer 1

您必须根据所选选项

的值添加自定义功能

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();

http://api.jquery.com/val/

Answer 2

您可以为此创建自定义规则。在此自定义规则中，您必须检查第二个下拉列表的值是否为option2。如果是，则显示该消息，否则显示空消息。

您可以在SO帖子jQuery Validate Plugin - How to create a simple custom rule?

中查看自定义规则创建

Answer 3

我正在尝试这篇文章中提出的建议

Custom jQuery Validation .addMethod question

希望这对我有用

Answer 4

最后，我找到了解决问题的简单方法。

这里是：

jQuery("#type2").validate({
expression: "if ((jQuery('#type1').val() == '2') && VAL == '0')   return false; else return true;",
            message: "Please make a selection"
        });

jquery表单验证

4 个答案: