Question

我有这个表单，其中包含三个选择框，一个用于一天，一个用于一个月，一个用于一年，并且已经尝试了相当长的一段时间来正确验证它。

我有一个方法可以为<select>的父级添加一个类，以便在侧面出现一个绿点以表明它是有效的。

现在，只要用户只输入年份或月份，即使其他字段之一设置为null，也会将类“valid”设置为父级。

我遇到的另一个问题是我正在做的事情是出生日期不需要验证表格，但如果用户希望输入他的出生日期，他可以这样做。

因此，我想要实现的是仅当用户输入三个<select>中的至少一个时才在<select>上开始验证，并且如果用户仍然验证表单什么都不进。

这是我到目前为止提出的代码：

jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != 'null');
}, "value required");

$("#registrationform").validate({
    rules: {
        dayofbirth:{selectcheck:true,},
        monthofbirth:{selectcheck:true,},
        yearofbirth:{selectcheck:true,}
    }
    highlight: function (element) {
        $(element).parent().addClass('error').removeClass('valid').closest('.form-group').addClass('error').removeClass('valid');
    },
    unhighlight: function (element) {
        $(element).parent().addClass('valid').removeClass('error').closest('.form-group').addClass('valid').removeClass('error');
    }
});

我没有添加错误消息和其他类似的东西，因为它与问题无关。

编辑：我更改了代码，以便日期不会调用selectcheck方法，因为我现在只将该方法用于其他一些复选框。现在我想尝试一种只验证日期的新方法。

Answer 1

我不完全确定为什么您为简单required规则已经可以执行的操作创建自定义方法。

如果您的HTML看起来像这样，那么第一个option包含value="" ...

<select name="month" class="date">
    <option value="">please select month...</option>
    <option value="1">January</option>
    <option value="2">February</option>
    ....
</select>

然后你可以使用这个......

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            month: {
                required: true
            }
        }
    });

});

DEMO：http://jsfiddle.net/KE9SU/

或者，如果您要将它们作为一组进行验证，则可以使用the additional-methods.js file中包含的require_from_group方法。

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            month: {
                require_from_group: [3, '.date']
            },
            day: {
                require_from_group: [3, '.date']
            },
            year: {
                require_from_group: [3, '.date']
            }
        },
        groups: {
            dateGroup: 'month day year'
        }
    });

});

DEMO：http://jsfiddle.net/KE9SU/1/

现在使用适当的规则，您可以更轻松地自动定位和设置错误元素。

JQuery <select>同时验证多个</select>

1 个答案: