MVC Client side validation are not working in partial view - asp.net-mvc

Question

I have a partial view which gets populated in modal body of my home page of MVC project. Partial view holds the login form as follows -
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="row">
<div class="col-xs-6">
<div class="well">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserEmailId, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com" } })
#Html.ValidationMessageFor(model => model.UserEmailId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserPassword, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="remember"> Remember login
</label>
</div>
</div>
<button type="button" class="btn btn-success btn-block" onclick="location.href='#Url.Action("Login", "Home")'">
Login
</button>
</div>
</div>
<div class="col-xs-6">
<p class="lead">Sign up with</p>
<ul class="list-unstyled" style="line-height: 2">
<li><span class="fa fa-check text-success"></span> See all your orders</li>
<li><span class="fa fa-check text-success"></span> Fast re-order</li>
<li><span class="fa fa-check text-success"></span> Save your favorites</li>
<li><span class="fa fa-check text-success"></span> Fast checkout</li>
<li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
<li><u>Read more</u></li>
</ul>
</div>
</div>
}
I am using a partial classes to define my data validations for the models(so that they wont get missed if I update my db first models) -
public class UserMetadata
{
[Display(Name ="Username")]
[EmailAddress(ErrorMessage ="Please enter your email address")]
[Required(ErrorMessage ="Required field")]
public string UserEmailId { get; set; }
[Display(Name ="Password")]
[DataType(DataType.Password)]
[Required(ErrorMessage = "Username is required")]
[StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
public string UserPassword { get; set; }
}
The validations are not working on the client side. They are not getting triggered. Am I missing some script reference?
I already have "ClientValidationEnabled" set to true in my web.config.
Please help. Thanks!
Edit -
The following is all included in my layout -
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/2d83329334.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")

Answer 1

Hi please check below code for reference
1. Model
public class UserMetadata
{
[Display(Name = "Username")]
[EmailAddress(ErrorMessage = "Please enter your email address")]
[Required(ErrorMessage = "Required field")]
public string UserEmailId { get; set; }
[Display(Name = "Password")]
[DataType(DataType.Password)]
[Required(ErrorMessage = "Username is required")]
[StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
public string UserPassword { get; set; }
}
2. Controller
public class UserDataController : Controller
{
// GET: Contacts/UserData
public ActionResult Index()
{
var userData = new UserMetadata();
return View(userData);
}
}
view and Javascript
#model UserMetadata
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm())
{
<div class="row">
<div class="col-xs-6">
<div class="well">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text- danger" })
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserEmailId, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com" } })
#Html.ValidationMessageFor(model => model.UserEmailId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserPassword, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="remember"> Remember login
</label>
</div>
<button type="button" class="btn btn-success btn-block" onclick="loginUser();">
Login
</button>
</div>
</div>
</div>
</div>
}
<script>
function loginUser()
{
if($('form').valid())
{
//redirect to some action like window.location=somerootPath+/login/home
}
else
{
//not valid
}
}
OutPut
Ensure the highlighted js are loaded except jquery UI.

Answer 2

One way of solution is:
In the html editor add 'required' field as below
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com",#required="required" } })
and no need of Html.ValidationMessageFor() for this.