I'm working with the MVC3 unobtrusive jquery validation. By default, the error message is put into a span which sits to the right of the validated element. There are situations when the error message will wrap onto a next line and looks ugly. I would like to change the "span" to a "div" so that the error element will display on its own line. I would also like to know, in general, how to override the jQuery defaults for the validator without modifying the jQuery libraries.
I have tried both of these javascript calls to trigger validation. This one doesn't validate:
var settngs = $.validator.defaults;
settngs.errorElement = "div";
$('#createForm').validate();
...and this one doesn't set the errorElement:
$.validator.unobtrusive.parse($('#createForm'));
I haven't been able to figure this out just by looking at the js files. Surely I'm missing something.
on line 108 (at least the version I have) of jquery.validate.unobtrusive.js I found:
errorElement: "span",
just change this to:
errorElement: "div",
this created a div below my field rather then a span beside it
Related
I'm trying to implement a checkbox captcha I read about here:
http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/
However I'm having issues adding the checkbox with client side javascript and unobtrusive validation.
I implemented a checkbox with unobtrusive validation based on Darin Dimitrov's answer here: MVC unobtrusive validation on checkbox not working which works perfectly.
However, once I remove the checkbox from my view and add it with this jquery code instead:
jQuery(document).ready(function (jQuery) {
$('div.test').append($("<input>").attr("id", "AcceptsTerms")
.attr("type", "checkbox")
.val("true")
.attr("name", "AcceptsTerms")
.attr("data-val-required", "This field is required.")
.attr("data-val-mustbetrue", "You must accept the terms and conditions")
.attr("data-val", "true")
.addClass("input-validation-error"));
$('div.test').append($('<input>').attr("type", "hidden")
.val("value", "false")
.attr("name", "AcceptsTerms"));
$('div.test').append($("<label>").attr("for", "AcceptsTerms")
.html("Accept terms and conditions"));
$('div.test').append($('<span>').addClass("field-validation-error")
.attr("data-valmsg-replace", "true")
.attr("data-valmsg-for", "AcceptsTerms"));
});
it no longer wants to validate. Are there any known issues with adding form elements after the document has loaded and unobtrusive validation? If so, has any attempted to implement this or have any suggestions on how to go about this?
Looks like I found the solution.
As I suspected and as Sparky mentioned: the jQuery Validate plugin is initialized once on the DOM ready event. Due to this, all I had to do after adding my input dynamically was to reinitialize unobtrusive validation.
I added this first for the rule:
$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
Then I added this to reinitialize unobtrusive validation:
$("form").removeData('validator');
$("form").removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($("form"));
Quote OP:
However, once I remove the checkbox from my view and add it with this
jquery code instead: {snip} it no longer wants to validate. Are there
any known issues with adding form elements after the document has
loaded and unobtrusive validation? If so, has any attempted to
implement this or have any suggestions on how to go about this?
This happens because the jQuery Validate plugin is initialized once on the DOM ready event but your checkbox does not yet exist. It's an all-too-common misconception that .validate() is called repeatedly as the user interacts with the form. It is not. .validate() is called once on DOM ready to initialize the plugin and form validation happens automatically when triggered by the default events.
If you need to dynamically alter the form's HTML, you must use one of the plugin's built-in methods to dynamically alter its options.
In your case, you need to use the rules('add') method, sometime after your jQuery adds the checkbox, to alter the rules option to apply your checkbox rule(s).
$(document).ready(function() {
$('div.test').append($("<input>").attr("id", "AcceptsTerms"). ... );
$('#AcceptsTerms').rules('add', {
required: true,
another_rule: parameter,
messages: { // <- this item is optional
required: "custom message"
another_rule: "custom message for this rule"
}
});
...
});
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I'm using jQuery unobtrusive validation version 2.0 for MVC3. I also have the latest jquery.validate (v 1.9). I have a popup form with this code:
$(document).ready(function () {
$('#createForm').submit(function () {
$.validator.unobtrusive.parse($('#createForm'));
(more)
(The third line is necessary so that the form fields added by javascript will be validated.)
The validation works fine except that a value such as $1,000.00 entered into an input tag that is bound to a decimal property in the viewmodel is invalid, while 1,000.00 is valid. Clearly the "$" is casting the value as a string in the eyes of the validator.
I have researched this for many hours and I have only found one other similar question posted (also on SO and it was unanswered). I can't believe that this has been encountered by every MVC3 developer who handles currency values in a modal dialog, otherwise we would surely have some resolution by now, right?
I have resolved the issue on the server side by creating a DecimalBinder. Now I need a solution for the client-side validation. I have been looking hard at the API for jquery.validate.unobtrusive but I can't seem to find a hook. I do not want to modify any standard javascript library.
How about a custom validation method which first looks to strip off any $ characters prior to validating?
var currentVal = (control's actual value);
currentVal = currentVal.replace('$','');
Then continue with validation. The obvious downside is the need for custom validators.
In the new version of jQuery validation plugin 1.9 by default validation of hidden fields ignored. I'm using CKEditor for textarea input field and it hides the field and replace it with iframe. The field is there, but validation disabled for hidden fields. With validation plugin version 1.8.1 everything works as expected.
So my question is how to enable validation for hidden fields with v1.9 validation plugin.
This setting doesn't work:
$.validator.setDefaults({ ignore: '' });
The plugin's author says you should use "square brackets without the quotes", []
http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/
Release: Validation Plugin 1.9.0:
"...Another change should make the setup of forms with hidden elements
easier, these are now ignored by default (option “ignore” has
“:hidden” now as default). In theory, this could break an existing
setup. In the unlikely case that it actually does, you can fix it by
setting the ignore-option to “[]” (square brackets without the
quotes)."
To change this setting for all forms:
$.validator.setDefaults({
ignore: [],
// any other default options and/or rules
});
(It is not required that .setDefaults() be within the document.ready function)
OR for one specific form:
$(document).ready(function() {
$('#myform').validate({
ignore: [],
// any other options and/or rules
});
});
EDIT:
See this answer for how to enable validation on some hidden fields but still ignore others.
EDIT 2:
Before leaving comments that "this does not work", keep in mind that the OP is simply asking about the jQuery Validate plugin and his question has nothing to do with how ASP.NET, MVC, or any other Microsoft framework can alter this plugin's normal expected behavior. If you're using a Microsoft framework, the default functioning of the jQuery Validate plugin is over-written by Microsoft's unobtrusive-validation plugin.
If you're struggling with the unobtrusive-validation plugin, then please refer to this answer instead: https://stackoverflow.com/a/11053251/594235
This worked for me, within an ASP.NET MVC3 site where I'd left the framework to setup unobtrusive validation etc., in case it's useful to anyone:
$("form").data("validator").settings.ignore = "";
Make sure to put
$.validator.setDefaults({ ignore: '' });
NOT inside $(document).ready
So I'm going to go a bit deeper in to why this doesn't work because I'm the kind of person that can't sleep at night without knowing haha. I'm using jQuery validate 1.10 and Microsoft jQuery Unobtrusive Validation 2.0.20710.0 which was published on 1/29/2013.
I started by searching for the setDefaults method in jQuery Validate and found it on line 261 of the unminified file. All this function really does is merge your json settings in to the existing $.validator.defaults which are initialized with the ignore property being set to ":hidden" along with the other defaults defined in jQuery Validate. So at this point we've overridden ignore. Now let's see where this defaults property is being referenced at.
When I traced through the code to see where $.validator.defaults is being referenced. I noticed that is was only being used by the constructor for a form validator, line 170 in jQuery validate unminified file.
// constructor for validator
$.validator = function( options, form ) {
this.settings = $.extend( true, {}, $.validator.defaults, options );
this.currentForm = form;
this.init();
};
At this point a validator will merge any default settings that were set and attach it to the form validator. When you look at the code that is doing the validating, highlighting, unhighlighting, etc they all use the validator.settings object to pull the ignore property. So we need to make sure if we are to set the ignore with the setDefaults method then it has to occur before the $("form").validate() is called.
If you're using Asp.net MVC and the unobtrusive plugin, then you'll realize after looking at the javascript that validate is called in document.ready. I've also called my setDefaults in the document.ready block which is going to execute after the scripts, jquery validate and unobtrusive because I've defined those scripts in the html before the one that has the call in it. So my call obviously had no impact on the default functionality of skipping hidden elements during validation. There is a couple of options here.
Option 1 - You could as Juan Mellado pointed out have the call outside of the document.ready which would execute as soon as the script has been loaded. I'm not sure about the timing of this since browsers are now capable of doing parallel script loading. If I'm just being over cautious then please correct me. Also, there's probably ways around this but for my needs I did not go down this path.
Option 2a - The safe bet in my eyes is to just replace the $.validator.setDefaults({ ignore: '' }); inside of the document.ready event with $("form").data("validator").settings.ignore = "";. This will modify the ignore property that is actually used by jQuery validate when doing each validation on your elements for the given form.
Options 2b - After looking in to the code a bit more you could also use $("form").validate().settings.ignore = ""; as a way of setting the ignore property. The reason is that when looking at the validate function it checks to see if a validator object has already been stored for the form element via the $.data() function. If it finds a validator object stored with the form element then it just returns the validator object instead of creating another one.
This worked for me within an ASP.NET site.
To enable validation on some hidden fields use this code
$("form").data("validator").settings.ignore = ":hidden:not(#myitem)";
To enable validation for all elements of form use this one
$("form").data("validator").settings.ignore = "";
Note that use them within $(document).ready(function() { })
Just added ignore: [] in the specific page for the specific form, this solution worked for me.
$("#form_name").validate({
ignore: [],
onkeyup: false,
rules: {
},
highlight:false,
});
This is working for me.
jQuery("#form_name").validate().settings.ignore = "";
The validation was working for me on form submission, but it wasn't doing the reactive event driven validation on input to the chosen select lists.
To fix this I added the following to manually trigger the jquery validation event that gets added by the library:
$(".chosen-select").each(function() {
$(this).chosen().on("change", function() {
$(this).parents(".form-group").find("select.form-control").trigger("focusout.validate");
});
});
jquery.validate will now add the .valid class to the underlying select list.
Caveat: This does require a consistent html pattern for your form inputs. In my case, each input filed is wrapped in a div.form-group, and each input has .form-control.
Just find the text ignore: ":hidden" in your jquery validation file and comment it.
After comment this it will never loss any hidden elements to validate...
Thanks
I'm requesting an ASP.net MVC view into a live box and the view contains form fields that have been marked up with attributes to be used by JQuery's unobtrusive validators plug-in.
The client script is not however working and my theory is that its because the validation framework is only being triggered on page load which has long since passed by the time the MVC view has been loaded into the live box.
Thus how can I let the validation framework know that it has new form fields to fix up?
Cheers, Ian.
var $form = $("form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
You may take a look at the following blog post. And here's another one.
Another option, rather trick, which worked for me. Just add following line in the beginning of the partial view which is being returned by ajax call
this.ViewContext.FormContext = new FormContext();
Reference
For some reason I had to combine bjan and dfortun's answers...
So I put this in my view:
#{
this.ViewContext.FormContext = new FormContext();
}
And this execute this after the ajax call finishes:
var form = $("#EnrollmentForm");
form.unbind();
form.data("validator", null);
$.validator.unobtrusive.parse(document);
form.validate(form.data("unobtrusiveValidation").options);
I had a similar issue. I had a form that was using Ajax requests to re-display a part of the form with different form fields. I used unobtrusive validation by manually doing it on the client side using the
#Html.TextBoxFor
for my text boxes. For some reason the validation works when attempting to submit with invalid fields (i.e., the text boxes get outlined in red and the appropriate error messages display with the content I put in the
data_val_required
attribute, for example.
However, after I click a button that makes an Ajax request to modify the form with different fields and then submit again, only the red outline on the invalid fields display, but no error messages are rendered.
bjan's trick worked for me, but I still can't see what was causing the issue. All the HTML necessary to carry out the client-side validation was there I just can't figure out why the error message attribute values wouldn't display.
All I can think of is that the jQuery validation code doesn't make a second attempt to check the form fields after a submit was made.