Question

我想显示不同的错误信息以验证出生日期。我希望在年龄低于13时单独显示错误消息。我有一个jquery validae addmethod来计算年龄。找到以下代码并建议如何显示用于验证年龄的错误消息。

$.validator.addMethod("check_date_of_birth", function(value, element) {

        var day = $("#dob_date").val();
        var month = $("#dob_month").val();
        var year = $("#dob_year").val();
        var age =  13;

        var mydate = new Date();
        mydate.setFullYear(year, month-1, day);

        var currdate = new Date();
        currdate.setFullYear(currdate.getFullYear() - age);

        return currdate > mydate;

    }, 'Age should not be less than 13');

$('#form').validate({

groups: {
             dob: "dob_date dob_month dob_year"
            },

rules: {
            sex      : "required",
            name     : "required",
            dob_date : { required: true },
            dob_month: { required: true },
            dob_year : { required: true, check_date_of_birth: true },
       },

messages: {
            sex      : "Choose gender",
            name     : "Enter name",
            dob_date : "Please select date/month/year",
            dob_month: "Please select date/month/year",
            dob_year : "Please select date/month/year",
          },
});

HTML

<div data-role="fieldcontain">
                    <legend><span lang="en">Date of Birth</span></legend>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <div id="id-error">
                            <label for="dob" class="error" generated="true"></label>
                        </div>
                        <select name="dob_date" id="dob_date" ></select>
                        <select name="dob_month" id="dob_month"></select>
                        <select name="dob_year" id="dob_year"></select>
                    </fieldset>
                </div>

在上面的html标签“dob”中，如果我还输入年龄低于13岁，则始终显示“请选择日期/月/年”消息。如果我选择年龄低于13岁，我想显示另一条错误消息。在何处更改以获取相同输入字段的新错误消息。

Answer 1

替代方法是删除可在13岁或以下选择的DOB的所有选项。

http://jsfiddle.net/7dNVR/

HTML

<div data-role="fieldcontain">
    <legend><span lang="en">Date of Birth</span>
    </legend>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <div id="id-error">
            <label for="dob" class="error" generated="true"></label>
        </div>
        <select name="dob_date" id="dob_date"></select>
        <select name="dob_month" id="dob_month"></select>
        <select name="dob_year" id="dob_year"></select>
    </fieldset>
</div>

JS

var month = [];

// set the names of the months 
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

var date = new Date();
var ageRestriction = 13;
var day = date.getDate();
//var month = month[date.getMonth()];

// set restriction
date.setFullYear(date.getFullYear() - ageRestriction);
var year = date.getFullYear();

var dayOptions = [];
$.each(new Array(31), function(n) { 
    n = n + 1; // offset by 1
    if (day > n) {
        dayOptions.push('<option value="'+ n +'" disabled="disabled">'+ n +'</option>');
    } else {
        dayOptions.push('<option value="'+ n +'">'+ n +'</option>');
    }    
});

var monthOptions = [];
$.each(new Array(12), function(n) { 
    if (date.getMonth() > n) {
        monthOptions.push('<option value="'+ (n + 1) +'" disabled="disabled">'+ month[n] +'</option>');
    } else {
        monthOptions.push('<option value="'+ (n + 1) +'">'+ month[n] +'</option>');
    }    
});

var yearOptions = [];
$.each(new Array(year), function(n) { 
    n = n + 1900;
    if (year >= n) {
        yearOptions.push('<option value="'+ n +'">'+ n +'</option>');
    }    
});

$('#dob_date').html(dayOptions.join(''));
$('#dob_month').html(monthOptions.join(''));
$('#dob_year').html(yearOptions.reverse().join(''));

$('#dob_date').on('change', function() {
    isValidDOB(date);
});

function isValidDOB(date)
{
    var selectedDate = $('#dob_date').val();
    var selectedMonth = $('#dob_month').val();
    var selectedYear = $('#dob_year').val();

    userSelectedDOB = new Date(selectedYear+"/"+selectedMonth+"/"+selectedDate);

    if (date.getMonth() != userSelectedDOB.getMonth()) {
        alert('Day selected out of range for Month');
        return false;
    }

    if (userSelectedDOB.valid()) {         
        return true;
    }
    return false;
}

这可以优化，因为它只是一个工作示例

BTW isValidDOB功能无法正常工作，它只是作为一个例子

Answer 2

您的代码：

rules: {
    // your other rules,
    dob_year : { 
        required: true,
        check_date_of_birth: true
    },
},
messages: {
    // other messsages,
    dob_year : "Please select date/month/year",
},

对于dob_year字段，您只为两个规则声明了一条消息。

您只需要为每个规则明确指定相应的消息：

messages: {
    // your other messsages,
    dob_year: {
        required: "Please select date/month/year",
        check_date_of_birth: "you are not yet 13"
    }
},

工作演示：http://jsfiddle.net/9x6Lb/

在jquery表单验证器中显示一个字段的不同错误消息

2 个答案: