ASP.NET MVC Data Validation - Highlight Table Row vs. TextBoxes

Question

On an ASP.NET MVC View, I have a couple of checkboxes, one for email address and one for phone. I want to make sure that at least one is checked (both can be checked, so a radio button is not ideal) and if neither are, highlight the row with a red border just like a textbox is with the validation functionality...

I have other fields that are getting validated correctly and the CSS is changing when there is an issue on the textboxes and textareas accordingly. The code below displays the message informing the user they must specify a contact preference, but does not highlight the row as having an issue...

SCREEN SHOT

VIEW

<table width="100%">
    <tr>
        <td>
            <label>
                How would you like us to contact you?
            </label>
        </td>
    </tr>
    <tr id="pref_row">
        <td>
            <span class="bold-text">Email: </span>&nbsp;
            <%=Html.CheckBox("EmailDesired")%>
            &nbsp; &nbsp; <span class="bold-text">Phone: </span>&nbsp;
            <%=Html.CheckBox("PhoneDesired")%>
        </td>
    </tr>
</table>

CONTROLLER

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(ContactUs contactus)
{
    ContactUsService svc = new ContactUsService();
    // Validation
    if (!contactus.EmailDesired && !contactus.PhoneDesired)
        ViewData.ModelState.AddModelError("pref_row", "Please specify a contact preference (phone and/or email)!");

    if (ViewData.ModelState.IsValid)
    {
        MessageModel msg = svc.SendRequest(contactus);
        return RedirectToAction("Index", msg);
    }
    else
    {
        return View();
    }
}

Daniel - One must be checked, but both can be checked as well. Radio buttons typically are for either A or B, not both A and B... — RSolberg
– RSolberg, Commented Jun 9, 2009 at 1:59

user434917 · Accepted Answer · 2009-06-09 03:26:00Z

When the HtmlHelper render itself it checks if there is any item in the ModelState dictionary that has the same key as the helper itself. if so the control will be rendered with the attribute class equal to "input-validation-error" which is defined in the css file.
So, the style will be applied only on the rendered input controls.

This is my solution:

<table width="100%">
    <tr>
        <td>
            <label>
                How would you like us to contact you?
            </label>
        </td>
    </tr>
    <tr class="<%=ViewData.ModelState["pref_row"]!= null ? "input-validation-error":"" %>">
        <td>
            <span class="bold-text">Email: </span> 
            <%=Html.CheckBox("EmailDesired")%>
                <span class="bold-text">Phone: </span> 
            <%=Html.CheckBox("PhoneDesired")%>
        </td>
    </tr>
</table>

Collectives™ on Stack Overflow

ASP.NET MVC Data Validation - Highlight Table Row vs. TextBoxes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related