In my Layout page, i have the following links to the validation Javascript files,
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")"type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
My entities are decorated with validation attributes like
[Required(ErrorMessage ="Please enter a customer name")]
public string CustomerName { get; set; }
Then in my view i have validation messages specified after the update fields like so
<div class="label-for">#Html.LabelFor(model => model.CustomerName)</div>
<div class="editor">#Html.EditorFor(model => model.CustomerName)</div>
#Html.ValidationMessageFor(model => model.CustomerName)
The validation is working however its not on the client side, the way i understand this is that error messages should be displayed when one of the fields is left blank afer tabbing to another field, is there anything else required to get client side validation working?
IIRC there were some incompatibilities between jquery and jquery.validate versions. You seem to be using an old version of jquery 1.4.4. Try updating with the latest. For example install the ASP.NET MVC 3 Tools Update and create a new ASP.NET MVC project in Visual Studio which will get you the proper versions of the following scripts: jquery, jquery.validate and jquery.validate.unobtrusive.
May be this work: Make sure that in your web.config file, you set "ClientValidationEnabled" to "True"
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
</appSettings>
NOTE: In MVC3 web project, there were two web.config files one under "View" folder another under root web project. make sure that the one in the root does not override the other.
jQuery validation has nothing to do with your validation mechanism. Maybe Microsoft.Ajax.Validation should be the responsible. But to use jquery.validation, you should write code. That's all. It doesn't do anything out of the box.
Related
I'm having problems using Ajax.BeginForm() in my simple ASP.NET MVC application. I've searched SO for solution but nothing I found seems to help.
I've created a new project using the default Visual Studio 2015 template. I've changed the Index.cshtml file to:
#{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more ยป</p>
</div>
<div class="row">
<div id="ajax-test"></div>
#using (Ajax.BeginForm("Test", new AjaxOptions()
{
UpdateTargetId = "ajax-test",
InsertionMode = InsertionMode.Replace
}))
{
<input type="submit" />
}
</div>
I've added a new action to HomeController:
public ActionResult Test()
{
return PartialView("Test");
}
A new view Home\Test.cshtml:
Hello world
And, crucially, I've added a reference to the required JavaScript files to _Layout.cshtml (moving them to the top of the page doesn't help).
...
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I've verified the jqueryval bundle renders in the debug mode as:
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
These entries were already present in web.config file:
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
I would expect that when I press Submit, the div will be populated with 'Hello world'. Instead, the whole page is replaced with 'Hello world' and the browser is redirected to /Home/Test. No errors reported in developer tools.
What element of the puzzle is missing? I know similar questions have been asked on StackOverflow before but the usual answer was to include these JavaScript files, which I did. Above are all the changes I've done to the template project so I can't see what I could break.
I've struggled with it for hours and managed to find the solution 5min after posting on StackOverflow. Typical.
I had to install a NuGet package Microsoft.jQuery.Unobrusive.Ajax, which is not installed by default, and add a reference to jquery.unobtrusive-ajax.js to the page. I thought it has been merged in into jquery.validate.unobtrusive.js or something but no.
I am currently creating an Intranet ERP application that will integrate an already existing corporate Joomla 3.1 based web site.
The extension i made so far only has one default controller php file and everything is made using a JavaScript UI framework. (i.e. jqWidgets) So i am not using model, views, helpers.
The other php files are there to respond to the client side interface AJAX requests.
So i mainly need Joomla for the user authentication and session control features but i dont want it to confine my extensions output to the content area... i need the entire document surface... no menu, no module columns, no nothing !
Can it be done ?
Two ways
component.php in the template will show only the component's output add &tmpl=component to your urls
Make a custom template that only outputs the component
<html>
<head>
<!-- put what scripts stylesheets you need etc//-->
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
I've been reading a lot of posts about unobtrusive validation. I'm trying to understand the difference (if any) between what visual studio provides in an empty MVC3 template and including the jquery.unobtrusive js files. At present this is what my inputs in the source look like
<input class="input-validation-error" data-val="true" data-val-required="The Surname field is required." id="Surname" name="Surname" type="text" value="" />
Is this unobstrusive validation?
With the data- attributes in your HTML syntax, it looks like your page is enabled for unobtrusive client-side validation.
With the traditional client-side validation javascript for the controls to be validated are generated at the server-side and passed on along with the HTML in the Response to the browser.
Hence in addition to the HTML content there will be inline script data embedded within <![CDATA[ ]]>
However with unobtrusive client-side validation instead of emitting inline javascript, it makes use of HTML5 compatible Data attributes
ASP.NET MVC 3 make use of jQuery for unobtrusive client-side validations. data- attributes will be manipulated from jQuery functions defined within jquery.unobtrusive js
By default unobtrusive mode is turned off in ASP.NET MVC 3. To make use of this you will need to enable both client-side validation & unobtrusive javascript validation.
This can be set in web.config
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>
Short answer yes it looks like you use unobtrusive validation. To have a deeper understandig of what it is and how it works please have a read http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
MVC outputs the data-* attributes and jquery provides the actual client side implementation if looking for those attributes.
http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html
i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...
Is there a way to trace why unobtrusive validation is not working?
I have disabled all my custom validators, and just using MVC validators, and still it posts back to the server for validation when I click submit.
It's driving me nuts. The only thing i can think of is that i have a hidden input that has no validation attributes on it other than [HiddenInput(DisplayValue = false)].
Is there a specific javascript function i can put a breakpoint in to determine which field is causing the form to submit?
EDIT:
I just realize that only IE8 is causing the server side validation. IE9, FF, and Chrome all are fine.
EDIT 2:
Ok, it must have been a cache issue or something. At some point it started working again, and it's still working even after restoring everythng.
Lesson learned. Alwasy clear you cache when you get goofy problems.
Make sure you have reference the following scripts and that the path is correct:
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
and that you have enabled client side validation in your web.config:
<add key="ClientValidationEnabled" value="true" />
Another important aspect is that if the form has been injected into the DOM as a result of an AJAX call, unobtrusive validation will not be attached to its elements and it will not work. You will have to attach it manually by using the $.validator.unobtrusive.parse method in your AJAX success callback after injecting it into the DOM.
Also FireBug's console tab is might be useful in showing potential javascript errors with your code.