javascript - 函数结果不显示错误文本

Question

我之前已经在其他页面上成功使用过该定义。基本上，它应该使该字段成为必填字段，但如果仅输入空格，则会失败(默认情况下输入，即单个空格会导致所需的检查通过)。我抛出一个警报只是为了查看处理程序何时被触发以及当时 this 的值。它在我期望的时候被触发，并且值正如我期望的那样。它应该返回 false 但显然不是，因为错误没有被显示。如果我删除该 depends 函数并仅使用 required: true，则当用户离开该字段时，它会正确显示错误。这是怎么回事？

ContactName: {
        required: {
            depends: function() {
                alert("'" + $(this).val() + "'");
                if ($.trim($(this).val()).length === 0) {
                    $(this).val($.trim($(this).val()));
                    return false;
                }
                return true;
            }
        },
        maxlength: 100
    }

Answer 1

您可以更改 ContactName 的规则，例如(有关详细信息，请查看 rules examples ):

ContactName: {
    required: true,
    minlength: {
        depends: function(ele) {
            if (ele.value.trim().length === 0) {
                ele.value = '';
                return false;
            }
            return true;
        }
    },
    maxlength: 100
}

代码片段:

$("#commentForm").validate({
    rules: {
        ContactName: {
            required: true,
            minlength: {
                depends: function(ele) {
                    if (ele.value.trim().length === 0) {
                        ele.value = '';
                        return false;
                    }
                    return true;
                }
            },
            maxlength: 100
        }
    },
    messages: {
        ContactName: "Please enter your contact name"
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>


<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <p>
            <label for="ContactName">Name</label>
            <input id="ContactName" name="ContactName" type="text">
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </fieldset>
</form>