MVC 3 Format Validation Messages

Question

I am working with a form layout that has 4 input fields per row so I need to find a different way to display the validation messages. I was thinking I could display any messages above the form but would like to add a border and a background color.

I am using unobtrusive JS for validation.

Is there a way to detect if there are validation errors from the view?

Example

 @using (Ajax.BeginForm("ProcessContactInfo", ajaxOpts))
    {
         @Html.ValidationSummary(true)
          if (!ViewData.ModelState.IsValid)//does nothing because using unobtrusiveJS validation
          {
         <div id="ValidationResultsArea" style="padding:20px; border: 1px solid #000000; background-color: #ffffcc; display: none" >
            @Html.ValidationMessageFor(model => model.Contact.FirstName)<br />
            @Html.ValidationMessageFor(model => model.Contact.LastName)<br />
            @Html.ValidationMessageFor(model => model.Contact.Email)<br />
            @Html.ValidationMessageFor(model => model.Contact.Message)<br /> 
         </div> 
         }
         <p><span class="required">&#42; All fields are required.</span></p>
}

Answer 1

Looks like you are looking for something similar to this....

If that is what you are looking for, then you can easily achieve it if you are using MVC3 and jquery validation. jQuery validation uses custom data attributes, css and unobtrusive javascript to perform user input validation, so when validation fails for a specific input field, jQuery "injects" data attributes and css classes, then you can take advantage of this by using css to define how you want to the fields to look like. Here's the HTML belonging to the screenshot above...

    <div class="editor-label">
        <label for="UserName" style="display: none;">User name</label>
    </div>
    <div class="editor-field">
        <span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">The User name field is required.</span>
        <input class="input-validation-error" data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" placeholder="Username" type="text" value="">
    </div>

    <div class="editor-label">
        <label for="Password" style="display: none;">Password</label>
    </div>
    <div class="editor-field">
        <span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">The Password field is required.</span>
        <input class="input-validation-error" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" placeholder="Password" type="password">
    </div>

    <div class="editor-label">
        <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false"> Remember Me
    </div>

    <p>
        <input type="submit" value="Log On">
    </p>

You can see that jQuery Validation framework added a class (input-validation-error) to the Username input field. You can specify override this css class in your project.