MVC player issue: unobtrusive javascript validation with MVC 3 razor

Topics: MVC, Troubleshooting
Aug 17, 2011 at 5:02 AM
Edited Aug 17, 2011 at 5:06 AM
I have an contact form with client / server side validation working properly in MVC. When I add the code to Composite C1 with the MVC player the client side validation attributes 
are not added to the input fields. When the form is submitted without these fields there is no client side validation and it is properly validated on the server. I am currently
handling client side validation by adding a custom js file but I am hoping for some help with a better solution.


This is the HTML rendered when the MVC code is not in Composite.
<
input id="FirstName" class="text-box single-line" type="text" value="" name="FirstName" data-val-required="Please enter your first name." data-val="true">
Here it is after being rendered with the MVC player.
<
input id="FirstName" class="text-box single-line" type="text" value="" name="FirstName">

Code:
~/App_Code/Composite/Controllers/HomeController.cs
using System.Web.Mvc;
using MVC3_Ajax_Form_jQuery_Validation.Models;
using System.Web.Helpers;

namespace MVC3_Ajax_Form_jQuery_Validation.Controllers
{   
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new ValidationModel());
        }

        [HttpPost]
        public ActionResult Form(ValidationModel validationModel)
        {
            if (ModelState.IsValid)
           {
               string Send_To = "Email@gmail.com";
               string From_Email = validationModel.Email;
               string Subject = "Contact Us Form";
               string Message = validationModel.Message;               
                WebMail.Send(
                       Send_To,
                       Subject,
                       Message,From_Email);
            }
            return PartialView(!ModelState.IsValid ? "Partial/_Form" : "Partial/_Success", validationModel);
        }
    }
}
~/App_Code/Composite/Model/ValidationModel.cs
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
using System.Web.Mvc;

namespace MVC3_Ajax_Form_jQuery_Validation.Models
{
    public class ValidationModel
    {
        [Required(ErrorMessage = "Please enter your first name.")]
        [Display(Name = "First Name:")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Please enter your last name.")]
        [Display(Name = "Last Name:")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Please enter your email address.")]
        [Display(Name = "E-mail:")]
        [RegularExpression(@"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "Please enter a valid email address.")]
    
        [Required(ErrorMessage = "Please enter your message.")]
        [DataType(DataType.MultilineText)]
        [Display(Name = "Message:")]
        public string Message { get; set; }
    }
}
~/Views/Home/Index.cshtml
@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel
<div class="form-separator"></div>
<div id="FormContainer">
    @Html.Partial("Partial/_Form")
</div>
~/Views/Home/Partial/_Form.cshtml
@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel
           
@using (Ajax.BeginForm("Form", new AjaxOptions() { UpdateTargetId = "FormContainer", OnSuccess = "$.validator.unobtrusive.parse('form');" }))
{      
    <p class="bold_input">
        @Html.LabelFor(m => m.FirstName)
        @Html.EditorFor(m => m.FirstName)
    </p>
    <p>
        @Html.ValidationMessageFor(m => m.FirstName)
    </p>      
    <p class="bold_input">
        @Html.LabelFor(m => m.LastName)
        @Html.EditorFor(m => m.LastName)
    </p>
    <p>
        @Html.ValidationMessageFor(m => m.LastName)
    </p>   
    <p class="bold_input">
        @Html.LabelFor(m => m.Email)
        @Html.EditorFor(m => m.Email)
    </p>
     <p>
        @Html.ValidationMessageFor(m => m.Email)
    </p>
    <p class="bold_input">
        @Html.LabelFor(m => m.Message)
        @Html.EditorFor(m => m.Message)
    </p>
     <p>
        @Html.ValidationMessageFor(m => m.Message)
    </p> 
     
    <input type="submit" value="Submit" />
}

~/Views/Home/Partial/_Success.cshtml
@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

Thank you for contacting us.

I added the following to the header in CommonHtmlHead.xsl
        <script type="text/javascript" src="~/Frontend/Scripts/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="~/Frontend/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script type="text/javascript" src="~/Frontend/Scripts/jquery.validate.js"></script>
        <script type="text/javascript" src="~/Frontend/Scripts/jquery.validate.unobtrusive.js"></script>       
I am using Composite C1 2.1.1 (2.1.4113.99). I omitted some of my code to keep in shorter. Thanks in advance for the help and hopefully someone will find this thread useful in the future.


Coordinator
Aug 17, 2011 at 11:39 AM

We need a few days to get to this - you should hear from us before the end of this week.

Coordinator
Aug 17, 2011 at 1:02 PM

Hi,

To enable client-side validation in ASP.NET MVC 3, you must:

1. Set two flags in web.config file:

 

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

 

2. include three JavaScript files:

 <script type="text/javascript" src="~/Frontend/Scripts/jquery-1.4.4.js"></script>
 <script type="text/javascript" src="~/Frontend/Scripts/jquery.validate.js"></script>
 <script type="text/javascript" src="~/Frontend/Scripts/jquery.validate.unobtrusive.js"></script> 

3. Make sure that you have CSS styles for validation helpers

 

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

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

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/

 

 

Aug 17, 2011 at 10:06 PM

Thank you very much. Adding the app settings to the bottom of my Web.config worked perfectly.
For anybody who is going to use this code add it to the ~/Web.config file and not the ~/View/Web.config

This is what the bottom of my ~/Web.config file has

</system.webServer>
  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>