如果另一个输入字段为空，如何使用非侵入式验证将输入字段设为必填字段？

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() { .. }之外$(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;
        } 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会更合适，因为仅在其他属性为空时才需要一个值。