CODEWITHSUNDEEP
asp.net-mvc-5zurb-foundation-5
dotnetdev_2009
dotnetdev_2009

Reputation: 791

Foundation 5 Abide validation not working with MVC5

I am trying to hook up Foundation 5 abide validation to my MVC 5 view.When I leave the required fields and try to submit the form,I see all the required fields highlighted in red,but I want to see the error message I added to the C# view model in the Required(ErrorMessage="username is required"]

These are the things I already added enter image description here Added these keys to my root level web.config

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

Added the data_abide attribute to the form element

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "form-user-register", data_abide = "" }))
{
    <div class="row">
        <div class="small-3 columns">
            @Html.DisplayNameFor(m => m.LoginName)<br />
            @Html.TextBoxFor(m => m.LoginName, new { id = "register-loginname"})                
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            @Html.DisplayNameFor(m => m.UserPassword)<br />
            @Html.TextBoxFor(m => m.UserPassword, new { id = "register-loginpassword" })
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            @Html.DisplayNameFor(m => m.Email)<br />
            @Html.TextBoxFor(m => m.Email, new { id = "register-loginpassword" })
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            @Html.DisplayNameFor(m => m.FirstName)<br />
            @Html.TextBoxFor(m => m.FirstName, new { id = "register-login-firstname" })
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            @Html.DisplayNameFor(m => m.LastName)<br />
            @Html.TextBoxFor(m => m.FirstName, new { id = "register-login-firstname" })
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <div class="left">
                <input type="submit" class="button radius small right" value="Register" />
            </div>

    </div>
</div>

}

I made sure that the jquery.validate.unobtrusive.js and jquery.validate.js is added to the _LayoutView.cshtml

This is the C# Viewmodel

public class RegisterViewModel
    {
        public int AppUserId { get; set; }

        [Display(Name="Username")]
        [Required(ErrorMessage="Username is required")]
        public string LoginName { get; set; }

        [Display(Name = "Email")]
        [Required(ErrorMessage = "Email is required")]
        public string Email { get; set; }

        [Display(Name = "FirstName")]
        [Required(ErrorMessage = "FirstName is required")]
        public string FirstName { get; set; }

        [Display(Name = "LastName")]
        [Required(ErrorMessage = "LastName is required")]
        public string LastName { get; set; }

        [Display(Name = "Password")]
        [Required(ErrorMessage = "Password is required")]
        public string UserPassword { get; set; }
        public AddressViewModel Address { get; set; }


    }

Still I only the the above screenshot

Upvotes: 0

Views: 631

Answers (1)

dotnetdev_2009
dotnetdev_2009

Reputation: 791

I figured out what the issue was.This might help someone like me in the future

I was missing couple of things in my _Layout.cshtml and the Register view

1.Missed thi sfrom _Layout view

<script>
    $(document).foundation()
</script>

2.Forgot to add the required HTML5 attribute and the html tag that abide validation uses to display the model error

<div class="small-3 columns">
            @Html.DisplayNameFor(m => m.LoginName)<br />
            @Html.TextBoxFor(m => m.LoginName, new { id = "register-loginname" ,required=""})    
            <small class="error">Username is required</small>          
        </div>

And validation worked like a charmenter image description here

Upvotes: 2

Related Questions