未应用 Html.Textbox 验证 CSS答案

【问题标题】：Html.Textbox validation CSS not Applied未应用 Html.Textbox 验证 CSS
【发布时间】：2009-12-30 19:04:00
【问题描述】：

提前感谢您的帮助。我在我创建的 2 个网站上遇到问题。我在页面上有 Html.TextBox 需要填写，并且我有验证工作，以便验证消息在它们为空时显示。我的问题是 TextBox 本身的 CSS。由于某种原因，文本框不会应用 .input-validation-error CSS 样式，但 Html.TextArea 会！当文本框中只允许 15 或 20 个字符时，我使用 TextAreas 是不切实际的。

那么 TextBoxes 和它们附带的 ValidationMessages 具有相同的名称。

我被难住了。

谢谢，蒂姆·萨维奇 Web开发人员 ACEP, LLC

【问题讨论】：

欢迎来到 SO。你可能想展示一些代码。
你能添加一些代码吗？

标签： asp.net-mvc validation textbox

【解决方案1】：

如果有后果，HTML 文本框的 HTML 看起来像

<input type='text' name='something'></input>

而文本区域看起来像

<textarea name='something'></textarea>

你确定 CSS 是正确的吗？一些示例代码可能会有所帮助...

【讨论】：

【解决方案2】：

您好，谢谢您的信息。这是有关此问题的一些代码。首先是一些背景知识：我正在使用一个包含诸如contactName、contactAddress、contactMessage 等信息的视图模型（它是一个电子邮件应用程序）。 View 包含一个用于输入contactName 或contactAddress 的TextBox 和一个用于消息的TextArea。

如果 contactName 文本框为空或包含无效的电子邮件地址，则会将错误消息添加到 ModelState 并显示 ValidationMessage（仅包含星号 (*)）。 TextArea（设置方式相同）显示星号，也会变成红色并带有红色边框，但 TextBox 没有。

这里有一些代码：

查看模型：
命名空间 SendAPage.Models.ViewModels { 公共类 SendMailViewModel { 公共 int ID { 获取；放; } 公共字符串联系人姓名 { 获取；放; } 公共字符串 [] 联系人姓名 { 获取；放; } 公共字符串联系人地址 { 获取；放; } 公共 int propertyId { 获取；放; } 公共字符串contactMessage {获取；放; }

        public Property Property { get; set; }

        public SelectList PropertySelectList { get; set; }

        public string[] selectedContacts { get; set; }

        public bool IsValid { get { return (GetRuleViolations().Count() == 0); } }

        public IEnumerable<RuleViolation> GetRuleViolations()
        {
            if (string.IsNullOrEmpty(contactMessage))
                yield return new RuleViolation("The message cannot be empty", "contactMessage");
            if (string.IsNullOrEmpty(contactName) && (contactNames == null || contactNames.Count() == 0))
                yield return new RuleViolation("You must select a person to send to", "contactName");
            if(!Regex.IsMatch(contactName, @"^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"))
                yield return new RuleViolation("The Email Address is not valid. Please enter a new one.", "contactName");
        }

    }
}

查看：
选择收件人：输入留言： ") %> （仅 A-Z 和 0-9 允许 250 个字符。最大计数）
输入的字符 |剩余字符 ") %>

                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: center;">
                            <input type="submit" value="Send Message" />&nbsp;<input type="reset" value="Reset Form" />
                        </td>
                    </tr>
                </table>
        <% } %>

CSS：

.field-validation-error
{
    color: #ff0000;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    padding:.8em;
    margin-bottom:1em;
    color:#8a1f11;
    border-color:#FBC2C4;
}

.error
{
 color: Red;
}

任何信息将不胜感激。

谢谢你，

蒂姆·萨维奇
网页开发者
ACEP，有限责任公司

【讨论】：

【解决方案3】：

同时添加 .input-validation-error 和 .input.input-validation-error 类。

【讨论】：