Question

我正在尝试为我的日期时间字段创建自定义验证方法，我在此处按照示例进行操作：Jquery validate date range fails和此处：Validate that end date is greater than start date with jQuery

以下是我的表格（在mvc 3 razor局部视图中）：

@using (Html.BeginForm("CreateFood", "Stock", FormMethod.Post, new { id = "formData" }))
{
       @Html.ValidationSummary(false, "Opps. Please correct the mistakes")
       <div class="editor-label">
           Storage Date
       </div>
       <div class="editor-field">
          @Html.EditorFor(model => model.StorageDate, new { @class = "storedate" })
          @Html.ValidationMessageFor(model => model.StorageDate)
       </div>

       <div class="editor-label">
          Expiry Date
       </div>
       <div class="editor-field">
         @Html.EditorFor(model => model.ExpiryDate, new { @class = "expirydate" })
         @Html.ValidationMessageFor(model => model.ExpiryDate)
       </div>
 }

脚本：

jQuery.validator.addMethod("dateRange", function () {
        var date1 = new Date(jQuery(".expirydate").val());
        alert(date1);
        var date2 = new Date(jQuery(".storedate").val());
        alert(date2);
        alert(date1 < date2);
        return (date1 < date2);
    }, "Please check your dates. The start date must be before the end date.");

$createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            $createdialog.dialog('close');
        },
        "Submit": function () {

            // Validate the form before ask for cabinet
            var frm = $('#formData');

            var validator = frm.validate({
                rules: {
                    "ExpiryDate": { dateRange: true }
                }
            });
            if (frm.valid()) {
                 submitForm();
            }

问题：

我不太确定语法，我应该在“ExpiryDate”中添加什么（它是一个选择器？还是表单字段名？）： var validator = frm.validate（{ 规则：{ “ExpiryDate”：{dateRange：true} }
方法中的所有alert（）都没有显示，所以我假设该方法永远不会发火..任何想法??

（PS：我正在使用特定格式的日期字段使用datepicker：

  $('.storedate').datepicker({ dateFormat: 'D, dd M yy' });
  $('.expirydate').datepicker({ dateFormat: 'D, dd M yy' });

）

这里真的需要帮助...已经在几天内搜索方法只是为了实现日期时间验证...

感谢任何反馈...谢谢...... }）;

Answer 1

Scott Allen的这些系列文章，它可能会帮助你找到更好的方法。

http://odetocode.com/blogs/scott/archive/2011/02/21/custom-data-annotation-validator-part-i-server-code.aspx http://odetocode.com/Blogs/scott/archive/2011/02/22/custom-data-annotation-validator-part-ii-client-code.aspx

Answer 2

首先，我将向您推荐图书馆http://momentjs.com/来处理日期及其验证。

在我的情况下，自定义规则验证没有被触发，因为.NET MVC自动配置表单验证。因此我必须在应用我之前删除该配置（以便能够使用自定义Kendo UI方法，...）然后一切正常。

这里有Javascript代码示例：

var errorPlaceholder = $("<div></div>");

function initializeFormValidator() {
    jQuery.validator.addMethod("year", function(value, element, options) {
        return (new Date().getFullYear()) >= parseInt(value, 10);
    });

    jQuery.validator.addMethod("greater20", function(value, element, options) {
        return (($(element).data("kendoDropDownList").value() == "1") && (parseFloat($(options).val()) >= 20.0));
    });

    $.data($("#myFormId")[ 0 ], "validator", null); //Remove previous configuration
    $("#myFormId").validate({
        focusInvalid: true,
        ignore: "",
        onkeyup: false,
        onfocusout: false,
        errorElement: "div",
        errorPlacement: function(error, element) {
            error.appendTo(errorPlaceholder);
        }
    });
}

function validateForm() {
        var ok = $("#myFormId").valid();
        if(!ok) {
            Utils.ShowAlert("Invalid form", errorPlaceholder.html(), BootstrapDialog.TYPE_WARNING);
        }

        return ok;
    }

一个输入的标记样本;）

<input data-msg-year="The construction year must be lower than the current year" data-rule-year="true" id="CARACTERISTICAS_GENERALES_antigue_cons" max="2100" min="1700" name="CARACTERISTICAS_GENERALES.antigue_cons" step="1" type="text" value="1700" data-role="numerictextbox" class="k-input error"/>

自定义jQuery验证方法从未触发过

2 个答案: