21

我正在做类似于远程验证的事情，除了我已经通过 jquery 手动拨打电话并设置了我必须设置的任何内容。

现在我的问题是，如果我想告诉验证器某个特定的文本框无效（并阻止页面提交，突出显示文本框等）。我将如何从代码中做到这一点？

@Html.LabelFor(m => Model.Slug)
@Html.TextBoxFor(m => Model.Slug)
<span id="UrlMsg" class="field-validation-error" style="display: none;"></span>

 if (error) {
        $('#UrlMsg').html('This name is already in use.').fadeIn('fast');
        //what should I do here for the rest of the validation?
 }
4

5 回答 5

50

首先，您可以添加验证摘要：

@Html.ValidationMessageFor(m => m.Slug)

然后，您可以使用 .showError 方法手动触发 jQuery 验证/不显眼的验证。这是一个示例：

var errorArray = {};
errorArray["Slug"] = 'Some error message for the Slug text box';
$('#SomeFormId').validate().showErrors(errorArray);
于 2011-11-02T23:31:04.037 回答
5

你也可以这样做：

@Html.ValidationMessageFor(m => m.Slug)

在您的代码中使用此功能：

function setError(id, message) {
        var span = $("span[data-valmsg-for=\"" + id + "\"]");
        if (span && span.length > 0) {
            $(span).html(message);
            if (message && message != "") {
                $(span).removeClass("field-validation-valid");
                $(span).addClass("field-validation-no-valid");
            } else {
                $(span).removeClass("field-validation-no-valid");
                $(span).addClass("field-validation-valid");
            }
        }
    }

然后可以设置错误

setError("Slug", "errorMsg");
于 2016-11-10T15:51:37.967 回答
3

使用 showErrors 不允许错误持续存在，因此运行 .valid() 清除了错误。相反，我添加了一个“forcibleerror”规则和一个 javascript 方法来设置消息。

function forceError(element, errorMessage) {
    $(element).rules("add", {
        forcibleerror: true,
        messages: {
            forcibleerror: function () { return errorMessage; }
        }
    });
    var isForced = false;
    if (errorMessage) {
        isForced = true;
    }
    $(element)[0].dataset.isForced = isForced;
    $(element).valid();
}
$.validator.addMethod("forcibleerror", function (value, element) {
    return $(element)[0].dataset.isForced !== "true";
});

用法：

forceError($('#Slug'), 'my custom message');

要将其恢复为有效状态：

forceError($('#Slug'), '');
于 2018-06-19T14:42:33.723 回答
3

这是对 FRL 答案的改进：

@Html.ValidationMessageFor(m => m.Slug)

JS函数

        const span = $('span[data-valmsg-for="' + name + '"]');
        function setError(name, message) {
            const span = $(`span[data-valmsg-for="${name}"]`);
            if (span && span.length > 0) {
                $(span).html(message);
                if (message) {
                    $(`input[name="${name}"]`).addClass("input-validation-error");
                    $(span).removeClass("field-validation-valid");
                    $(span).addClass("field-validation-error");
                } else {
                    $(`input[name="${name}"]`).removeClass("input-validation-error");
                    $(span).removeClass("field-validation-error");
                    $(span).addClass("field-validation-valid");
                }
            }
        }

称它为

    setError("Slug", "errorMsg");
于 2018-12-21T08:25:24.200 回答
0

在我看来，接受的答案有两个大问题使它无用：

  1. 它不会将输入的状态更改为无效。因此，用户可以自由提交表单。
  2. 一旦接下来验证输入，它将被清除，例如在输入的下一个键盘事件中。

kevinpo 的回答解决了这两个问题，如果您需要动态生成的错误消息，这可能是您应该使用的。但是静态错误消息通常已经足够好了，所以......

让我们通过不显眼的验证让这变得非常简单。

将此添加到您的站点范围的 javascript 文件中：

$.fn.extend({
  toggleOk: function (value) {
    this[0].dataset.ok = value;
    this.valid();
  }
});

$.validator.addMethod("ok", function (value, element) {
  return this.optional(element) || $(element)[0].dataset.ok === "true";
});

$.validator.unobtrusive.adapters.addBool("ok");

将此添加到 HTML 中的相关输入元素。第一个属性 ，data-val-ok告诉不显眼的验证为此输入激活这种类型的验证，并告诉它在无效时显示什么错误消息。第二个属性data-ok将初始状态设置为有效。

data-val-ok="That item does not exist." data-ok="true"

在页面的 Javascript 中调用此代码以将输入设置为无效，显示错误和相关格式，并阻止页面提交。

$('#myInput').toggleOk(false);

调用它以将其更改回有效，隐藏错误和相关格式，并允许页面提交：

$('#myInput').toggleOk(true);
于 2020-10-02T19:33:08.173 回答