Html.Textbox validation CSS not Applied

Question

Hello all,

Thank you in advance for any help. I am having an issue on 2 of my websites that I have created. I have Html.TextBox 's on the page that need to be filled out and I have validation working so that the validation message shows up when they are empty. My issue is with the CSS for the TextBox itself. For some reason the textboxes won't apply the .input-validation-error CSS style, but a Html.TextArea will! It is impractical for me to use TextAreas when only 15 or 20 characters are allowed in the textbox.

Then TextBoxes and the ValidationMessages that go with them have the same name.

I am stumped.

Thanks, Tim Savage Web Developer ACEP, LLC

Answer 1

In case it is of consequence, an HTML text box's HTML looks like

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

whereas a textarea looks like

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

Are you sure the CSS is correct? Some example code might help...

Answer 2

Hey Thanks for the info. Here is some code concerning this issue. First some background: I am using a View Model that includes information such as contactName, contactAddress, contactMessage (it is an emailing application). The View contains a TextBox that is used for entering the contactName or contactAddress and a TextArea that is used for the message.

If the contactName TextBox is empty or contains an email address that is not valid, then an error message is added to the ModelState and the ValidationMessage (which contains just an asterisk (*)) shows up. The TextArea (which is set up the same way) shows the asterisk and also turns red and has a red border but the TextBox does not.

---

Here is some code:

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

    }
}

VIEW:
<%= 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;
}

Any information would be greatly appreciated.

Thank you,

Tim Savage
Web Developer
ACEP, LLC