如何使用 jquery 清除单个验证消息

Question

VC5 项目

我的 Razor 视图中有这个文本框和验证消息：

@Html.TextBoxFor(m => m.FireSrv.Size) @Html.ValidationMessageFor(m => m.FireSrv.Size)

我只想清除（而不是隐藏）这条消息，我不想清除整个表单。

我试过了，还是不行：

$('#FireSrv_Size').find(".field-validation-valid").remove();

FireSrv_Size 正确，是表单中字段的id。

我已经实现了

IValidatableObject

在我的 ViewModel 中。

public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
  string em = "Size is required";
  if (HasFireSrv) { if (string.IsNullOrEmpty(FireSrv.Size)) { yield return new ValidationResult(em, new[] { "FireSrv.Size" }); } }
 ...

这是在生成验证错误之前和之后查看源代码中显示的内容：

 <input id="FireSrv_Size" name="FireSrv.Size" type="text" value="" />
 <span class="field-validation-valid" data-valmsg-for="FireSrv.Size" data-valmsg-replace="true"></span>

 <input class="input-validation-error" id="FireSrv_Size" name="FireSrv.Size" type="text" value="" />
 <span class="field-validation-error" data-valmsg-for="FireSrv.Size" data-valmsg-replace="true">Size is required</span>

我怎样才能清除那一条验证消息？

Answer 1

我不得不指出.removeClass(); 从元素中删除所有类，通常不是预期的效果。您可以简单地使用 $(".field-validation-valid").removeClass(".field-validation-valid"); 删除单个类，因为您可以通过这种方式定位您希望删除的类。

或针对特定元素

<input id="FireSrv_Size" class="FireSrv_Size" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="FireSrv.Size1" data-valmsg-replace="true"></span>

修订：使用添加的类

剃刀语法：

@Html.TextBoxFor(m => m.FireSrv.Size, new { @class = "validate-my-field" }) @Html.ValidationMessageFor(m => m.FireSrv.Size)

新标记具有类：

<input id="FireSrv_Size" class="validate-my-field" name="FireSrv.Size" type="text" value="" />

带有新类的代码：

var myfield = $('.validate-my-field')
myfield.removeClass('field-validation-error');
myfield.next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

具体的 ID：

var myfield = $('#FireSrv_Size');
myfield.removeClass('field-validation-error');
myfield.next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

一拍即合：

$('#FireSrv_Size').removeClass('field-validation-error').next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

如果在页面渲染后添加了 span 上的验证数据属性，您可能需要这样做：

$('#FireSrv_Size').removeClass('field-validation-error').next('span').filter(function(){
    return $('[data-valmsg-for]');
}).removeClass("field-validation-error").addClass("field-validation-valid").html("");

Answer 2

如果您希望在服务器端将其删除，请使用以下命令：

ModelState["FireSrv.Size"].Errors.Clear();

在客户端，您可以执行以下操作：

$('#FireSrv_Size").removeClass("field-validation-error");

看到这个jsFiddle。如果这对您不起作用，请告诉我。

更新 1 - 经过一些研究和调试，这是我本地示例中可以消除错误的代码。

var $form = $("form");
var $validator = $form.validate();

// all errors
//var $errors = $form.find(".field-validation-error span");

// find just error attached to FireSrv_Size
var $errors = $("#FireSrv_Size").next(".field-validation-error").find("span");

// trick unobtrusive to think the elements were successfully validated
// this removes the validation messages
$errors.each(function(){ 
    $validator.settings.success($(this)); 
});

我以这篇文章SO为起点。

Answer 3

这将清除 ...-validation-error 类和 data-valmsg-for="FireSrv.Size" 的内容。第一行清除 TextBox 上的 input-validation-error 类。

var textname = '"FireSrv.Size"'; $('input:text[name=' + textname + ']').removeClass();
var dvmf = '"FireSrv.Size"'; $('span[data-valmsg-for=' + dvmf + ']').html("");
$('span[data-valmsg-for=' + dvmf + ']').removeClass("field-validation-error").addClass("field-validation-valid");

Answer 4

您可以改用$(".field-validation-error").empty() 来清除所有验证错误消息。 使用.remove() 或.hide() 会从屏幕上删除错误消息，即使提交时出现任何错误也不会再次显示。

希望这有助于解决您清除验证错误消息的主要目的。