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

How to clear an individual Validation message with jquery

本文关键字：验证 消息 单个 清除 何使用 jquery      更新时间：2023-09-26

VC5 项目

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

@Html.TextBoxFor（m => m.FireSrv.Size） @Html.ValidationMessageFor（m => m.FireSrv.Size）

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

我试过这个，但它不起作用：

$（'#FireSrv_Size'）.find（".field-validation-valid"）.remove（）;

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

我已经实现了

四可取对象

在我的视图模型中。

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>

如何只清除那一条验证消息？

我觉得有必要指出，.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("");

如果在页面呈现后添加了跨度上的验证数据属性，则可能需要执行以下操作：

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

如果要在服务器端删除它，请使用以下命令：

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)); 
});

我以这篇文章为起点。

这将清除...-validation-error类和data-valmsg-for="FireSrv.Size"的内容。 第一行清除文本框上的输入验证错误类。

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");

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

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

相关文章：