使用 jQuery 使用 asp.net 必填字段验证器验证必填字段

validating required fields with asp.net required field validators using jquery

本文关键字：字段 验证 使用 jQuery asp net      更新时间：2023-09-26

HTML：

<fieldset>
    <p>
       <label>SOME LABEL</label><span class="required"> *</span>
    </p>
    <input type="text" id="txtBox">
</fieldset>

使用jQuery，我试图获取"span.required"并添加一个类"missing"（将颜色更改为红色）。

JQuery Code：

$('#txtBox').closest('fieldset').find('span.required').addClass('missing');

ASP.NET 中必填字段验证器的 JQUERY 代码：

for (var i = 0; i < Page_Validators.length; i++) {
            var val = Page_Validators[i];
            var ctrl = document.getElementById(val.controltovalidate);
            if (ctrl != null && ctrl.style != null) {
                if (!val.isvalid) {
                    ctrl.closest('fieldset').find('span.required').addClass('missing');
                }
                else {
                    //alert('no error');
                }
            }
        }

通过控制台出错：对象 [ctrl 对象 - 文本框] 没有最接近的方法

我已经尝试过使用"查找"父"等进行不同的干预，但我尝试的似乎都没有奏效。

我的代码有什么问题？我无法抓住那个跨度。

感谢大家的

投入，我从大家的投入中学到了很多东西。每个人的答案都有有效且有效的代码，但是只有选定的人提供了解决方案。

首先，您应该对HTML进行一些更改，这不仅可以帮助您解决此问题，还可以使代码更干净，更有效：

  1. 向所有<label>标签添加一个for属性，将它们与它们匹配的输入配对（这实际上应该始终使用标签来完成），以及
  2. 将<span class="required"> *</span>移动到标签内（因为它确实是标签的一部分）

生成的代码如下所示：

<fieldset>
    <p>
        <label for="txtBox">SOME LABEL<span class="required"> *</span></label>
    </p>
    <input type="text" id="txtBox">
</fieldset>

一旦你这样做了，你想要完成的事情就会变得容易得多：

而不是：

ctrl.closest('fieldset').find('span.required').addClass('missing');

。您可以使用输入 （ val.controltovalidate ） 的 ID 作为 JQuery 选择器的一部分来直接查找相关标签：

var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');

我已经多次使用它来将验证与正在验证的字段的标签配对......快速干净。 :)

编辑：我拆分了最后一个JS片段以防止它滚动，但它可能是一行。 :)

试试 txtbox.parent（） 代替。

txtbox.parent().find('span.required-field').addClass('missing') 

$('span.required').addClass('missing');

试试这个：

$(function(){
   $('#txtBox').parent().find('span.required').addClass('missing'); 
});

检查 http://jsfiddle.net/alaminopu/unZPZ/

看看这个，我同时使用了closest（）和parent（）。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            .missing{color:red;}
            .required{color:blue;}
        </style>
        <script>
            $(document).ready(function(){
                $(function(){
                   $('#txtBox').parent().find("span.required").removeClass("required").addClass("missing"); 
                   //$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing"); 
                });
            });
        </script>
    </head>
    <body>
        <fieldset>
            <p>
               <label>Some Label</label> <span class="required"> *</span>
            </p>
            <input type="text" id="txtBox">
        </fieldset>
    </body>
</html>

http://jsfiddle.net/GdBnw/

呵

呵。

相关文章：