Question

我正在使用有效且不引人注目的jquery开发ASP MVC3项目。我在页面上有几个区域需要为其创建自定义验证，并确保它不会破坏其他任何内容。目前我有几个部分，每个部分都有一个单选按钮对，一些文本框，一个按钮和一个表。用户填写文本框，点击按钮，我有一个功能，将文本框中的数据放入表格的新行。每按一次按钮，我也有一个提前计数器。

验证需要遵循“如果单选按钮返回true，则计数器必须> 1。

我写了这个功能似乎可以工作，但我相信我需要重新编写它，因此它与现有的验证相关联，因此需要添加方法或规则：

$(document).ready(function () {
    $("#nextBtn").click(function () {
         var rows = $("#ROTable tr").length;
          if ($("#RO_Yes").is("checked") && (rows < 3))
          {
             $(this).closest("div.historyCollection").css("backgroundcolor: #ff0000;");
          }
    });
});

我环顾四周，在JQUery网站上找到了一个讨论规则（依赖值）的部分，看起来似乎很合适。但是因为我对这些东西很陌生，所以在我向一个方向看起来太过刻苦之前，我想对专家进行调查。谢谢你的阅读。

编辑：我一直在玩，我想出了这个：

第二次编辑：正如TallMaris所说，ROCounter selctor是错误的，所以它现在已经纠正但仍然失败并出现同样的错误：

$(document).ready(function () {
    $("#ROCounter").rules("add", {
        required: ($("#RO-Yes").is(":checked")) && ($('#ROCounter') < 1),
        messages: {
            required: "Please enter further information"
        }
    });
});

但它破坏了所有验证并在jquery.validate.min.js文件中导致错误： “TypeError：无法读取未定义的属性'形式'。

ROCounter是一个隐藏的领域。如果错误消息附加到此隐藏字段，这是否意味着该消息也将被隐藏，所以不显示？这是一些HTML：

<div class="formQuestion">
        <div class="editor-field2">
            @Html.RadioButtonFor(m => m.HistoryModel.EverHadRestrainingOrder, true, new { @class = "commentBox", id="RO_Yes" })
                <label for="HistoryModel_ChildAbuseCurrent">Yes</label>
            @Html.RadioButtonFor(m => m.HistoryModel.EverHadRestrainingOrder, false, new { @class = "commentBox", id = "RO_No", @checked = "checked" })
                <label for="HistoryModel_ChildAbuseCurrent">No</label>
        </div>
        <div class="editor-label2">
            @Html.LabelFor(m => m.HistoryModel.EverHadRestrainingOrder)
        </div>

@*  Start Fieldset collection for Restraining Order   *@
   <div class="hidden">
     <fieldset class="historyCollection"> 
       <legend>Please provide the following information</legend>  
        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Date of Order")
            </div>
            <div class="editor-field-Hist">
                @Html.TextBox("OrderDate-RO", null, new { @class = "dp" })
            </div>
        </div>

        <div class="formGroupHist" style="width: 125px">
            <div class="editor-label-Hist">
                @Html.Label("State")
            </div>
            <div class="editor-field-Hist">
            @Html.DropDownList("State-RO", new SelectList(Model.State, "Value", "Text"), "Select", new { style = "width: 65px;" })
            </div>
        </div>

        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Name of Protected Party")
            </div>
            <div class="editor-field-Hist">
                @Html.TextBox("ProtectedParties")
            </div>
        </div>            

        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Explanation of Circumstances")
            </div>
            <div class="editor-field-Hist">
                @Html.TextArea("Comments-RO")
            </div>
        </div>
        <div class="button">
            <button type="button" id="ROButton" class="SKButton">Add Information</button>
        </div>

        <div>
            @Html.HiddenFor(m => m.ROCounter)
        </div>
        <table id="ROTable" class="data-table-page2">
            <tr>
                <th>Date of Order</th>
                <th>State</th>
                <th>Name(s) of Protected Parties</th>
                <th>Explanation of Circumstances</th>
            </tr>
            <tr class="ROTempRow">
                <td colspan=4>No Information Entered.</td>

            </tr>
        </table>
    </fieldset>
</div>

我的主要问题是如何正确地将新验证规则绑定到现有验证中。我已经读过，不引人注目的首先解析文档寻找现有的验证，如果找到任何验证，它将不再进一步。该表格的大部分内容与“库存”验证相关联，因此我无法将其打破。一旦我弄明白这一部分，我就可以找出实际的规则编码。

谢谢。

Answer 1

如评论中所述，由于MVC的库存验证，“必需”规则已经到位。而且，显然MVC3没有最小值的库存验证器，但只适用于Range ... 我建议你将自己的方法添加到验证器对象中，并将此规则添加到对象中，如下所示（来自API doc）

$.validator.addMethod("min_counter", function (value, el) {
    return value > 1;
});

然后添加规则。请注意，上面方法的名称将作为规则和消息对象的键重复，这就是validate（）方法知道运行什么方法来执行实际验证的方法。

$("#ROCounter").rules("add", {
    //this tells validator to evaluate only when the radio is checked. 
    //For example, if you put "true" here, the rule "min_counter" will be evaluated always.
    min_counter: $("#RO-Yes").is(":checked"), 
    messages: {
        min_counter: "Please enter further information"
    }
});

请告诉我这是否适合您。

如何添加自定义验证方法？

1 个答案: