Menu
I have layout page with all scripts as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<some custom css>
<modernizr>
<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
<script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
<script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
<some custom scripts>
<bootstrap scripts>
<knockout scripts>
</head>
<body>
@RenderBody()
</body>
</html>
Then I have my registration Form as shown
@model Mysite.Models.Account.Account
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
@Html.AntiForgeryToken();
<h1>Login</h1>
@Html.ValidationSummary();
@Html.EditorFor(m => m.Name)
@Html.EditorFor(m => m.Address1)
@Html.EditorFor(m => m.Address2)
@Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
$("#btn1").click(function (e) {
e.preventDefault();
$.ajax({
url: 'http://localhost:3885/Account/Register',
data: form.serialize(),
type: 'POST',
success: function (result) {},
error: function (req, status, error) {
function(req, status, error);
}
});
});
</script>
My Account Model class is as follow :
public class Account
{
public Name name {get; set;}
public Address Address1 {get; set;}
public Address Address2 {get; set;}
public Phone Phone1 {get;set;}
}
where each Property is also a model class with its own EditorTemplates for example
public class Name
{
[Required]
public string FirstName {get; set;}
public string MiddleName {get; set;}
[Required]
public string LastName {get; set;}
}
and have Name.cshtml EditorTemplate as below
<div >
@Html.TextBoxFor(m=>m.FirstName);
@Html.TextBoxFor(m=>m.MiddleName);
@Html.TextBoxFor(m=>m.LastName);
<div>
similarly for Address.cshtml and Phone.cshtml
in web.config: -
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
On clicking Register button on empty form it does ajax post to Register [HttpPost] Controller method. Why does it not give me client side validation messages i think its called Unobtrusive validation ? I don't see any errors in console as well.
617
We can enable and disable the client-side validation by setting the values of ClientValidationEnabled & UnobtrusiveJavaScriptEnabled keys true or false. This setting will be applied to application level. For client-side validation, the values of above both the keys must be true.
validator. unobtrusive. parse(selector) method to force parsing. This method parses all the HTML elements in the specified selector and looks for input elements decorated with the [data-val=true] attribute value and enables validation according to the data-val-* attribute values.
jQuery is a Javascript library. An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.
The submit button must be of type 'submit' to trigger the jquery validate validation, whether using the jquery plugin on its own or with the unobtrusive plugin.
So this would trigger the validation:
<input type="submit" value="Register" id="btn1" />
But seeing as you have already have written some code to handle the button click, it might be easier to just manually trigger the validation
$("#btn1").click(function (e) {
e.preventDefault();
// now trigger the form validation, result is 1 or 0
var result = $('form').valid();
$.ajax(
// details omitted
);
});
I think you need to reorder the scripts references
<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
<script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.js"></script>
<script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
if your are using the _Layout.cshtml remove the follow reference
@Scripts.Render("~/bundles/jquery")
on the bottom
that work for me!
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
