Question

这是我的情景：

  <!-- Normal Control -->
  <div class="required">
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
  </div>

  <!-- Same Control - but with a validation error -->
  <div class="required error">
    <p class="error">Address Line 1 Field is required</p>
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
  </div>

在“验证错误”html区域中，我可以使用以下代码显示消息：

  <div class="required">
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Line 1 Field is required</p>' />
    <label for="address1">Address (line 1)</label>
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" runat="server"/>
  </div>

我无法做的是将附加类添加到周围的div标签中。我以为我可以这样做：

  <div class="required <%= !address1_validate.isValid ? "error" : "" %>">

这几乎不起作用。

无论如何，我不想依赖JavaScript来设置这些值 - 它需要像“Web 1.0”一样工作。

有什么想法吗？

谢谢，乔恩

-------我的解决方案------- 这是我背后的代码：

  protected void Page_Load(object sender, EventArgs e)
  {
    if (this.IsPostBack)
    {
      address1_validate.Validate();
      if (!address1_validate.IsValid)
      {
        address_panel.CssClass = "required error";
      }
    }
  }

前端：

  <asp:Panel runat="server" id="address_panel" CssClass="required">
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Field is required</p>' />
    <label for="address1">Address (line 1)</label>
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" EnableViewState="true" runat="server"  />
  </asp:Panel>

感谢您的帮助！

Answer 1

你可以用ASP面板替换div，当然是runat = server。

<asp:Panel runat="server" ID="Panel1">
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
</asp:Panel>

在代码隐藏中，您可以这样做 -

address1_validate.Validate();
...
...
if(address1_validate.IsValid)
     Panel1.CssClass = "required";
else
     Panel1.CssClass = "required error";

Answer 2

可以只在其上放置一个ID并运行runat =“server”并在后面的代码中更改它。

Answer 3

首先，将runat = server和id添加到外部div。

从这里你有几个选择。您可以覆盖页面上的validate方法并更改该div上的类设置。

或者，您可以创建一个继承自requiredfieldvalidator的自定义验证程序。添加一个属性以保存div id，并在验证代码中根据需要注入您的类。

Answer 4

我想加入这个，如果您为RequiredFieldValidator或CustomValidator挂钩OnPreRender并将类添加到要验证的元素/控件中，您可以这样做：

protected void uxValidator_PreRender(object sender, EventArgs e)
    {
        RequiredFieldValidator uxValidator = sender as RequiredFieldValidator;
        bool isValid = true;
        WebControl control = null;
        if (uxValidator != null)
        {
            isValid = uxValidator.IsValid;
            control = uxValidator.NamingContainer.FindControl(uxValidator.ControlToValidate) as WebControl;
        }
        else
        {
            CustomValidator uxCustomValidator = sender as CustomValidator;
            if (uxCustomValidator != null)
            {
                isValid = uxCustomValidator.IsValid;
                control = uxCustomValidator.NamingContainer.FindControl(uxCustomValidator.ControlToValidate) as WebControl;
            }
        }
        if (control != null)
        {
            if (!isValid)
            {
                control.Attributes["class"] = "error";
            }
            else
            {
                if ((control as TextBox) != null && !string.IsNullOrEmpty((control as TextBox).Text))
                {
                    control.Attributes["class"] = "";
                }
            }
        }
    }

如何在周围的DIV上添加额外的CSS类以进行失败的表单验证？

4 个答案: