60392

Validation not working in partial view

Question:

I have an Index page which has two partial views: login and register.I am using data model validation.

Login.cshtml

@model Project.ViewModel.UserModel <div style="position:inherit;"> @using (Html.BeginForm("_Login", "account")) { @Html.ValidationSummary(true) <div class="label">@Html.Label("Username")</div> <div class="field">@Html.TextBoxFor(m => m.Username)</div> <div class="error">@Html.ValidationMessageFor(model => model.Username)</div> <div class="label">@Html.Label("Password")</div> <div class="field">@Html.PasswordFor(m => m.Password)</div> <div class="error">@Html.ValidationMessageFor(model => model.Password)</div> <input class="field" id="submit" type="submit" value="Login" /> }

Register.cshtml

@model Project.ViewModel.UserModel <link href="~/Content/Site.css" rel="stylesheet" /> <div style="position: inherit; margin-top: 20px"> @using (Html.BeginForm("_Register","account")) { <div class="label">@Html.Label("Name")</div> <div class="field">@Html.TextBoxFor(m => m.FullName)</div> <div class="error">@Html.ValidationMessageFor(model => model.FullName)</div> <div class="label">@Html.Label("Username")</div> <div class="field">@Html.TextBoxFor(m => m.Username)</div> <div class="error">@Html.ValidationMessageFor(model => model.Username)</div> <div class="label">@Html.Label("Password")</div> <div class="field">@Html.PasswordFor(m => m.Password)</div> <div class="error">@Html.ValidationMessageFor(model => model.Password)</div> <div class="label">@Html.Label("Confirm Password")</div> <div class="field">@Html.PasswordFor(m => m.ConfirmPassword)</div> <div class="error">@Html.ValidationMessageFor(model => model.Password)</div> <div class="label">@Html.Label("Email")</div> <div class="field">@Html.TextBoxFor(m => m.Email)</div> <div class="error">@Html.ValidationMessageFor(model => model.Email)</div> <div class="label">@Html.Label("Country")</div> <div class="field">@Html.TextBoxFor(m => m.Country)</div> <div class="error">@Html.ValidationMessageFor(model => model.Email)</div> <input class="field" id="submit" type="submit" value="Sign Up" /> @Html.ValidationSummary() }

Index.cshtml

@model Project.ViewModel.UserModel @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div id="regiserandlogin"> <div id="registerandlogin-header"> <label style="margin-left:50px;">Sign Up For Free!!!</label> <label style="margin-left:350px;color:#28a1e2">Already Have An Account?</label> </div> <div id="registerbox"> @Html.Partial("_Register", new ProjectHub.ViewModel.UserModel()) </div> <div id="loginbox"> @Html.Partial("_Login", new ProjectHub.ViewModel.UserModel()) </div>

public ViewResult _Register() { return View("_Register"); } [HttpPost] public ActionResult _Register(UserModel usermodel) { if (!ModelState.IsValid) { return View("Index"); } try { FormsAuthentication.SetAuthCookie(usermodel.Username, false); return RedirectToAction("activationemail", new {username= Username}); } catch (Exception ae) { ModelState.AddModelError("", ae.Message); return View(); } } public ViewResult _Login() { return View("_Login"); } [HttpPost] public ActionResult _Login(string username, string password) { if (ModelState.IsValid) { if (MembershipService.ValidateUser(username, password)) { if (!repository.IsVerified(username)) { ModelState.AddModelError("","Account is not activated.; return View(); } FormsAuthentication.SetAuthCookie(username,false); return RedirectToAction("Index","Home"); } return RedirectToAction("Index", "account"); ; } else { ModelState.AddModelError("","Invalid Username/Password"); return View(); } }

UserModel.cs

using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace ProjectHub.ViewModel { public class UserModel { [Required(ErrorMessage="Username is Required")] public string Username { get; set; } [Required(ErrorMessage = "Password is Required")] public string Password { get; set; } [Required(ErrorMessage = "Password is Required")] public string ConfirmPassword { get; set; } [Required(ErrorMessage = "Name is Required")] public string FullName { get; set; } [Required(ErrorMessage = "Email is Required")] public string Email { get; set; } [Required(ErrorMessage = "Country is Required")] public string Country { get; set; } } }

When I press register button like this, I get <a href="http://tinypic.com/view.php?pic=m819vm&s=6" rel="nofollow">a validation error</a>

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/iJbCu.png" data-original="https://i.stack.imgur.com/iJbCu.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

If I use RedirectToAction Method, I don't get the validation error. Please advise me.

Answer1:

You should not use the same view model for both partials. You should have 2 different view models.

For example:

public class LoginViewModel { [Required(ErrorMessage="Username is Required")] public string Username { get; set; } [Required(ErrorMessage = "Password is Required")] public string Password { get; set; } }

and for the register partial:

public class RegisterViewModel { [Required(ErrorMessage="Username is Required")] public string Username { get; set; } [Required(ErrorMessage = "Password is Required")] public string Password { get; set; } [Required(ErrorMessage = "Password is Required")] public string ConfirmPassword { get; set; } [Required(ErrorMessage = "Name is Required")] public string FullName { get; set; } [Required(ErrorMessage = "Email is Required")] public string Email { get; set; } [Required(ErrorMessage = "Country is Required")] public string Country { get; set; } }

and then your main view model should aggregate those 2 view models:

public class MyViewModel { public LoginViewModel Login { get; set; } public LoginViewModel Register { get; set; } }

and then:

<div id="registerbox"> @Html.Partial("_Register", Model.Login) </div> <div id="loginbox"> @Html.Partial("_Login", Model.Register) </div>

Answer2:

Add the following reference to the JQuery scripts in your View.<br /> I went through the same situation and it solved my problem.

"~/Scripts/jquery.unobtrusive*" "~/Scripts/jquery.validate*"

Recommend

  • SQL how to do an outer join properly
  • How would i implement an infinite scroll in my DOM
  • Batching in py2neo
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • Jquery Show & ScrollTop (or ScrollTo)
  • Tinymce strips attributes on submit
  • View Paypal shopping cart contents on my site
  • How to add regEx in angular filter
  • How to validate a year I enter in textbox using jquery rule?
  • jquery code not working without breakpoint
  • How to Save JSON data to SQL server database in C#?
  • IE10 strips out hashtag from the URL
  • jQuery: How to AJAXify WordPress Search?
  • Passing “get” parameters doesn't work, parameter not visible in the link
  • Floated image with variable width and heading with background image
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • Center align outputs in ipython notebook
  • pillow imaging ImportError
  • Adjust width of select element according to selected option's width
  • Button click event not firing in jQuery
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • All Classes Conforming to Protocol Inherit Default Implementation
  • req.body is undefined - nodejs
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Websockets service method fails during R startup
  • Android Studio and gradle
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery