Client side validation in MVC 4

Hi,

I have an MVC 4 site and have a view where validation is done. The view looks like this:

@{
    ViewBag.Title = "Intresseanmälan Städpojkarna Väst AB";
}
@{ Html.EnableClientValidation(); }

@model RTSOL.Models.Multi
@using Kendo.Mvc.UI

@{
    var culture = System.Threading.Thread.CurrentThread.CurrentUICulture.Name.ToLowerInvariant();
    using (Html.BeginForm())
    {
    <h2 style="padding-bottom: 20px;">Sök jobb hos oss online</h2>
    <div style="float: left; padding: 10px 0 10px 0;">
        <button type="submit" title="Skicka!" class="contactbutton" name="contactb" value="contactSite">Skicka intresseanmälan!</button>
    </div>
        <div style="float: left; padding: 10px 0 10px 0;">
            @Html.TextBoxFor(model => model.empd.filelist, new { @class = "customerid" })
        </div>
    <div style="clear: both;" />
    <div style="float: left; margin-right: 30px;">
        @Html.TextBoxFor(model => model.empd.PersonalNumber, new { @class = "formtext", placeholder = "Personnummer #", type = "text" })<br />
        @Html.TextBoxFor(model => model.empd.FirstName, new { @class = "formtext", placeholder = "Förnamn #", type = "text" })<br />
        @Html.TextBoxFor(model => model.empd.LastName, new { @class = "formtext", placeholder = "Efternamn #", type = "text" })<br />
        @Html.TextBoxFor(model => model.empd.Email, new { @class = "formtext", placeholder = "E-postadress #", type = "text" })<br />
    </div>
    <div style="clear: both;" />
    <span class="formtext">Fält markerade med # är obligatoriska.</span>
    }
    <div>
        @Html.ValidationSummary(false, "", new { @class = "valtext" })
    </div>

    <div>
        <div>
            <p>
                Om du har ett CV och/ellar annat dokument som beskriver dig kan du bifoga dessa.
            </p>
        </div>
    </div>

<div style="width: 80%">
    <div>
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Save", "jobb")
                .Remove("Remove", "jobb")
                .AutoUpload(true)
            )
            .Events(events => events
                .Success("onSuccess")
            )
            .Messages(m => m.Select("Välj dokument"))
            .Messages(m => m.Remove("Ta bort dokumentet"))
            .Messages(m => m.DropFilesHere("Du kan dra och släppa ditt dokument här"))
            .Messages(m => m.HeaderStatusUploading("Laddar upp dokumentet"))
            .Messages(m => m.HeaderStatusUploaded("Uppladdat"))
            .Files(files =>
            {
                foreach (var f in Model.ufiles)
                {
                    files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                }
            })
        )
    </div>
</div>
}

Open in new window


The server side validation works fine but what do I need to do client side validation? I was looking at this blog post http://weblogs.asp.net/scottgu/asp-net-mvc-2-model-validation but couldn't get that to work. My model is here:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace RTSOL.Models
{
    public class EmpForm
    {
        [Required(ErrorMessage = "Ange personnummer!")]
        [RegularExpression(@"^[12]{1}[90]{1}[0-9]{6}-[0-9]{4}$",
        ErrorMessage = "Var vänlig ange personnumret i formatet 19010101-1234")]
        public string PersonalNumber { get; set; }

        [Required(ErrorMessage="Ange förnamn!")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Ange efternamn!")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Ange e-postadress!")]
        [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
        ErrorMessage = "Ogiltig e-postadress!")]
        public string Email { get; set; }

        public string filelist { get; set; }
    }
}

Open in new window


Best regards
RTSOL
RTSolAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
Could you explain what doesn't work with the client-side validation, please?
Miguel OzSoftware EngineerCommented:
For MVC 4 you need to check:
1. Enable client validation at Web.config (They are enabled by default when MVC4 project is created)
<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
 </appSettings>

Open in new window

2. Make sure you add the associated JS files (jquery.validate and jquery.validate.unobtrusive) in your view, they are associated with the following bundle:
 @Scripts.Render("~/bundles/jqueryval") 

Open in new window

Note:  The JQuery library typically goes in your _Layout view.

To check when you page is loaded, on the developer tool pane (F12) check that the 3 JS files are present. If more help required post your complete Scripts references to your target view and shared layout view as well as bundle configuration information.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RTSolAuthor Commented:
It works!

Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.