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

Question

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

在所附的屏幕截图中，如果不输入“标题”或“表演者”字段，则无法提交搜索表单。如果两个字段都有值就好了。我想通过在“表演者”为空时将“标题”作为必填字段来实现此目的。但我下面的代码不起作用。我在服务器端进行了必要的验证。我正在寻找客户端解决方案。

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()

方法中的代码应首先检查“其他属性”（

searchWorkPerformer

）是否有值，如果有则返回

true

。如果没有，则检查

searchWorkTitle

是否有值。如果有则返回

true

，否则无效，返回

false

。

// scripts for jquery, jquery.validate and jquery.validate.unobtrusive
<script>
    $.validator.addMethod("requiredif", function (value, element, params) {
        if ($(params).val().length === 0) {
            return true;
        } else if (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

会更合适，因为如果其他属性为空，您只需要一个值。