未应用Html.Textbox验证CSS

Question

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

那么TextBoxes和与它们一起使用的ValidationMessages具有相同的名称。

我被难住了。

谢谢，Tim Savage Web Developer ACEP，LLC

Answer 1

如果是这样的话，HTML文本框的HTML如下所示

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

而文本区域看起来像这样

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

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

Answer 2

嘿，谢谢你的信息。这里有一些关于这个问题的代码。首先介绍一些背景知识:我使用了一个包含contactName、contactAddress、contactMessage等信息的视图模型(这是一个电子邮件应用程序)。视图包含一个用于输入contactName或contactAddress的TextBox和一个用于消息的TextArea。

如果contactName TextBox为空或包含无效的电子邮件地址，则会向ModelState添加一条错误消息，并显示ValidationMessage (仅包含星号(*))。TextArea (以相同的方式设置)显示星号，并且也变为红色，并且有一个红色边框，但TextBox没有。

下面是一些代码：

查看模型：

 namespace SendAPage.Models.ViewModels     {         public class SendMailViewModel         {             public int Id { get; set; }             public string contactName { get; set; }             public string[] contactNames { get; set; }             public string contactAddress { get; set; }             public int propertyId { get; set; }             public string contactMessage { get; set; }

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

    }
}

查看：

 <%= Html.ValidationSummary("There were some errors.  Please fix them and try again.") %>     <%                     using (Html.BeginForm())                     { %>                     <%= Html.Hidden("Id", Model.Id) %>                     <%= Html.Hidden("Property", Model.Property) %>                     <%= Html.Hidden("propertyId", Model.propertyId) %>                                                                                                            Select Recipient:                                                                                           Enter Message:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       <%= Html.TextBox("contactName", Model.contactName) %>                                                     <%= Html.ValidationMessage("contactName", "_") %>                                                                                                                                                                                                                                                                                                                                              (Only A-Z & 0-9 Allowed 250 char. max count)_                                     

                                   _characters entered |  characters remaining                                                                   <%= Html.TextArea("contactMessage", Model.contactMessage, 8, 10, new { @class = "word\_count", maxlength = "250"}) %>                                  <%= Html.ValidationMessage("contactMessage","_") %>                             

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

任何信息都将不胜感激。

谢谢,

Tim Savage

Web开发人员

ACEP，LLC

Answer 3

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