尝试将 required 添加到 jQuery 验证会破坏其他所有内容

Tes*_*rex 1 jquery-validate asp.net-mvc-4

我已经阅读了我能找到的所有其他 jQuery 验证问题,但没有任何帮助。我正在尝试做一些应该如此简单但不显眼的验证让我想在我的所有四个显示器上打一个洞(嫉妒?)

我有一个形式为 a 的字段select,另一个作为日期选择器。When the select takes on a certain value, the date becomes required. 对于所有其他选择值,日期是可选的。当页面第一次加载时,日期是可选的——也就是说,Required模型元数据中没有属性。

这是我的脚本块以及我需要帮助的漏洞:

<script type="text/javascript">
    function DateRequirement() {
        if ($("#StatusID").val() == 602) {
            $("#DateOfFirstCoverage").attr("data-val-required", "A date is required for current members.");
            // some kind of re-validating here?
        }
        else if ($("#DateOfFirstCoverage").attr("data-val-required") !== undefined) {
            $("#DateOfFirstCoverage").rules("remove", "required");
            // some kind of re-validating here?
        }
    }

    $("#StatusID").change(DateRequirement);
    $(document).ready(DateRequirement);
</script>
Run Code Online (Sandbox Code Playgroud)

仅供参考,我尝试了其他添加需求的方法,例如使用.rules("add", { required: true }),但仍然存在问题。这是我的问题列表:

  1. 使用.rules所需的添加方法,我得到设置未定义的错误。很多 SO 答案都说您需要先重新验证表单,我尝试过,但尽管它消除了错误,但该字段仍然不是必需的。
  2. 我现在拥有代码的方式,如上所示,成功地使该字段成为必需的,但前提是它在文档准备好期间设置。如果我在加载后更改选择框,它将永远不会成为必需。
  3. 最奇怪的问题是,无论我尝试什么,任何显示成功的迹象都会破坏页面上的其余验证。我还有一堆其他必填字段。如果我的DateOfFirstCoverage字段成功成为必填字段,并且我填写了它但删除了一个不同的必填字段,则页面会愉快地提交而无需验证抱怨其他字段。例如,如果我的代码片段的一部分如下所示,就会发生这种情况:

    if ($("#StatusID").val() == 602) {
        $("form").validate();
        $("#DateOfFirstCoverage").rules("add", { required: true });
    }
    
    Run Code Online (Sandbox Code Playgroud)

那么,到底发生了什么?在不弄乱我的其他规则的情况下完成我想要的“正确”方法是什么?

Tes*_*rex 5

想通了这一点。其他帖子之一 -这个帖子 - 中提供了正确的答案,但我必须弄清楚如何使用它。最后的脚本块是这样的:

<script type="text/javascript">
    function DateRequirement() {
        $("form").removeData("validator").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");

        if ($("#StatusID").val() == 602) {
            $("#DateOfFirstCoverage").rules("add", { required: true, messages: { required: "A date is required for current members." } });
        }
        else {
            $("#DateOfFirstCoverage").rules("remove", "required");
            $("form").validate().element("#DateOfFirstCoverage");
            console.log("reset");
        }
    }

    $("#StatusID").change(DateRequirement);
    $(document).ready(DateRequirement);
</script>
Run Code Online (Sandbox Code Playgroud)

删除顶部的验证器可确保不显眼的验证不会提前退出,因为验证器已经连接。这解决了我为什么其他字段没有验证的奇怪问题。然后通过要求不显眼的解析,总会有一个验证器,所以我可以对所需的规则使用正常的规则添加方法。