如果另一个输入字段为空，如何使用不显眼的验证使输入字段成为必填字段？

Question

我有一个简单的表单，其中包含三个不同的文本框，用于在返回结果集之前输入搜索条件。在三个字段中，如果另一个字段为空，我想将两个字段设置为有条件地必填。

在附加的屏幕截图中，如果不输入 "Title" 或 "Performers" 字段，则无法提交搜索表单。如果两个字段都有值就可以了。我想通过在 "Performers" 为空时将 "Title" 作为必填字段来实现这一点。但是我下面的代码不起作用。我在服务器端进行了必要的验证。我正在寻找客户端解决方案。

HTML源代码：

<form id="searchWorkForm">
        <div class="contourField textfield">
            <label for="searchWorkTitle" class="fieldLabel">Title</label>
            <div class="search-input">
                <a id="searchWork" href="#" style="z-index: 2000; margin-top: 0;"><img src="/images/profile-search.png" alt="" style="z-index: 1000;" id="profileSearch" /></a>
                <input type="text" name="searchWorkTitle" id="searchWorkTitle" class="text caps" value="" placeholder="Title" data-val="true" data-val-requiredif="title is mandatory" data-val-requiredif-otherpropertyname="searchWorkPerformer">
                <span class="field-validation-valid" data-valmsg-for="searchWorkTitle" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="contourField textfield">
            <label for="searchWorkWriter" class="fieldLabel">Writers</label>
            <div class="wideInput">
                <input type="text" name="searchWorkWriter" id="searchWorkWriter" class="text caps" value="" placeholder="Writer Name">
                <span class="field-validation-valid" data-valmsg-for="searchWorkWriter" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="contourField textfield">
            <label for="searchWorkPerformer" class="fieldLabel">Performers</label>
            <div class="wideInput">
                <input type="text" name="searchWorkPerformer" id="searchWorkPerformer" class="text caps" value="" placeholder="Performer Name" data-val="true">
                <span class="field-validation-valid" data-valmsg-for="searchWorkPerformer" data-valmsg-replace="true"></span>
            </div>
        </div>
</form>

客户端验证码：

$(function() {
    if ($.validator && $.validator.unobtrusive) {

        $.validator.addMethod("requiredif", function (value, element, params) {
            return !(value.length === 0 && $(params).val().length === 0);
        });

        $.validator.unobtrusive.adapters.add("requiredif", ["otherpropertyname"], function (options) {
            options.rules["requiredif"] = "#" + options.params.otherpropertyname;
            options.messages["requiredif"] = options.message;
        });
    }

    $("#searchWork").click(function() {

        if ($("#searchWorkForm").valid()) {
            // Make an Ajax Call and get the search result
        }
    });
}

Answer 1

您首先需要将 $.validator.addMethod() 和 $.validator.unobtrusive.adapters.add() 函数移到 $(function() { .. }

之外

但是根据您想要验证的描述，您的 $.validator.addMethod() 方法中的代码应该首先检查 'other property' (searchWorkPerformer) 是否有值，并且如果是 return true。如果没有，则检查 searchWorkTitle 是否有值。如果有，那么returntrue，否则无效，所以returnfalse.

// scripts for jquery, jquery.validate and jquery.validate.unobtrusive
<script>
    $.validator.addMethod("requiredif", function (value, element, params) {
        if ($(params).val().length === 0) {
            return true;
        } elseif (value.length === 0) {
            return false;
        }
        return true;
    });
    $.validator.unobtrusive.adapters.add("requiredif", ["otherpropertyname"], function (options) {
        options.rules["requiredif"] = "#" + options.params.otherpropertyname;
        options.messages["requiredif"] = options.message;
    });

    $(function() {
        $("#searchWork").click(function() {
            if ($("#searchWorkForm").valid()) {
                // Make an Ajax Call and get the search result
            }
        });
    }
</script>

旁注：requiredif 并没有真正描述您的验证 - 也许 requiredifempty 更合适，因为如果另一个属性为空，您只需要一个值。

如果另一个输入字段为空，如何使用不显眼的验证使输入字段成为必填字段？

How to use unobtrusive validation to make an input field required field if another input field is empty?

c#

asp.net-mvc

jquery-validate

unobtrusive-validation