jquery 验证如果另一字段不为空，则使一个字段为必填

Question

我在使用 jQuery.validate 1.11 、.Net 4.8 和 MVC 5 with Razor 时遇到一些问题。

我的班级有这两个属性：

[StringLength(500, ErrorMessage = "{0} can have a max of {1} characters")]
public string MyProperty { get; set; }

[StringLength(100, ErrorMessage = "{0} can have a max of {1} characters")]
public string MyOtherProperty { get; set; }

在我的 Razor 页面上有这个：

@Html.TextBoxFor( m => m.MyProperty )
@Html.TextBoxFor( m => m.MyOtherProperty  )

@using (Html.BeginScripts()) {
    <script src="@Url.Content( "~/Scripts/MyScriptFile.js" )" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            MyScriptModule.Init();
        }); // end of document.ready
    </script>
}

然后我的Javascript文件是这样的：

var $form = $("#MyForm");
var $submit = $("#Save");

var MyScriptModule = (function () {

    var init = function () {
    
    $submit.bind("click", function () {
        HandleSubmitLogic();
    });
    
    // Initialize form validation
        $form.validate({
            ignore: [],
            rules: {
                MyOtherProperty: {
                    required: function (element) {
                        return $("#MyProperty").val().length > 0;
                    }
                } 
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
        });

    }; // end init 
    
    function HandleSubmitLogic() {

        $submit.prop("disabled", true);
        ResetFormValidation($form);
        $form.validate();
        if ($form.valid()) {
            $form.submit();
        }
        $submit.prop("disabled", false);
    }
}

因此长度验证按预期触发，但我无法使该规则起作用，如果 MyProperty 有值，则需要 MyOtherProperty。 我从另一个 StackOverflow 链接这里得到了这个，它似乎与在线文档这里相符。

那么我做错了什么？

Answer 1

在 ASP.NET MVC 中工作时遇到同样的问题。

但是，这可以通过订阅更改事件侦听器并添加/删除

required

规则来解决。

// Initialize form validation
$form.validate();

$("#MyProperty").change(function () {
    if ($(this).val().length > 0) {
        $("#MyOtherProperty").rules("add", {
            required: true
        });
    } else {
        $("#MyOtherProperty").rules("remove", "required");
    }
});