输入类型日期的自定义错误消息不起作用

Custom error message for input type date does not work

提问人:William 提问时间:8/8/2023 最后编辑:journpyWilliam 更新时间:8/11/2023 访问量:70

问:

我想为日期类型的输入创建自定义错误消息。规则是,输入是必需的。如果提供了输入,则输入应在 1920 年 1 月 1 日到去年(今天的日期减去一年)的范围内。我做了以下工作 这是我的输入字段:

<div class="form-group col-lg-5 desktop-margin">
                                    <label for="DateofBirth" class="required-field">Date of birth</label>
                                    <input id="dob" name="dob" type="date" class="form-control" value="@Model.DateofBirth" data-val="true" data-rule-required="true" data-val-required="Date of birth is required." data-rule-customdate="true" data-val-customdate="Invalid date.">
                                    <div id="dobError" class="help-block field-validation-valid"></div>
                                </div>

这是我的jQuery:

$.validator.addMethod("customdate", function (value, element) {
        // Convert the input value to a Date object
        var selectedDate = new Date(value);

        // Get today's date and calculate the date one year ago
        var currentDate = new Date();
        var oneYearAgo = new Date();
        oneYearAgo.setFullYear(currentDate.getFullYear() - 1);

        // Define the minimum and maximum allowed dates (1/1/1920 and today's date - 1 year)
        var minDate = new Date("1920-01-01");
        var maxDate = oneYearAgo;
        console.log("selectedDate is: " + selectedDate + " minimum date is: " + minDate + " maximum date is: " + maxDate); 
        // Check the conditions and return the result
        if (isNaN(selectedDate)) {
            console.log("no date was provided"); 
            createErrorSpan("Date of birth is required.");
            return false; // Date is not valid
        } else if (selectedDate > maxDate) {
            console.log("date is big"); 
            createErrorSpan("Date should occur before " + formatDate(maxDate) + ".");
            return false; // Date is bigger than today's date - 1 year
        } else if (selectedDate < minDate) {
            console.log("date is small"); 
            createErrorSpan("Date should occur after " + formatDate(minDate) + ".");
            return false; // Date is less than 1/1/1920
        }

        return true; // Date is valid and meets all conditions
    });

    // Adapter for customdate validation method
    $.validator.unobtrusive.adapters.add("customdate", function (options) {
        options.rules["customdate"] = true;
        options.messages["customdate"] = options.message;
    });
    $("#dob").on("input", function () {
        var isValid = $("#MyForm").valid();
        console.log("input is triggered and its: " + isValid); 
        if (isValid) {
            if ($("#dobError").has("span").length > 0) {
                $("#dobError").find("span").remove();
            }
        }
    });

我注意到在添加日志后,除非我输入有效日期,否则不会触发“customdate”功能。例如,当日期为 2000 年 2 月 2 日时,只有在输入 2000 年的最后一个零后才会触发。输入 2033 年 2 月 2 日时永远不会触发。我错过了什么?
另外,有没有更好的方法来使用 $(“MyForm”).valid()?因为这将触发表单中所有字段的验证。

javascript jquery unobtrusive-validation

评论

0赞 Sparky 8/11/2023
仅供参考 - 阅读文档。该方法还可以附加到单个字段,而不仅仅是整个窗体。我不相信你可以从内部调用一个函数。任何像这样的动态都必须包装在一个 . 很可能被忽略了。同样,彻底查看文档和示例,以及搜索有关 SO 的数千个其他问题。.valid()addMethod()function() { ... }createErrorSpan
0赞 William 8/16/2023
谢谢@Sparky。我一直在寻找文档或任何相关问题,但没有用:(
0赞 Sparky 8/17/2023
不知道怎么找不到它。文档是第一个 Google 结果:jqueryvalidation.org

答: 暂无答案