I am using kendo controls for my project. I was using jquery validation to validate my controls at client side but as jquery validation is not working for kendo controls so I am using kendo validators to validate the controls.
I am using dataannotation validation with MVC 5 project. Here is sample dojo.
It is working perfect but the validation only appear on focus-out or blur event. Is there any way to validate control on change of value of control like jquery validation?
Update:
Here is the complete solution that helped me to resolve this issue:
if ($.validator !== undefined) {
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
var highLightElement;
if (element.parent().hasClass("k-picker-wrap") ||
element.parent().hasClass("k-numeric-wrap")) {
highLightElement = element.parent().parent();
}
else if (element.parent().hasClass("k-widget")) {
highLightElement = element.parent();
} else if (element.parent().children('.k-upload-empty').length > 0) {
highLightElement = $(element.parent().children('.k-upload-empty')[0]);
} else {
highLightElement = element;
}
highLightElement.addClass('input-validation-error');
},
unhighlight: function (element, errorClass) {
element = $(element);
var highLightElement;
if (element.parent().hasClass("k-picker-wrap")
|| element.parent().hasClass("k-numeric-wrap")) {
highLightElement = element.parent().parent();
}
else if (element.parent().hasClass("k-widget")) {
highLightElement = element.parent();
} else {
highLightElement = element;
}
highLightElement.removeClass('input-validation-error');
}
});
}
You have 2 ways to meat your purpose:
Using jQuery Unobtrusive Validation with KendoUI
Background
As you know the Kendo UI Editor creates a different elements than HTML form elements. Other JavaScript editors work in a similar fashion. The actual HTML is hidden using CSS (display: none;), and therein lies the issue. By default jQuery Validation ignores hidden input fields. There are validation data-* attributes on the form elements, but since it is hidden, when the unobtrusive validation fires, the editor is ignored.
Solution
You have 2 ways to solve this issue and perfectly work with both technologies. Read the Making the Kendo UI Editor Work With jQuery Validations and if you have any problem for implementing, please read Kendo UI NumericTextBox With jQuery Validation as an example for NumericTextBox
Then, You may have problem to assign proper CSS class in case of validation. You can read adding jquery validation to kendo ui elements.
Just using KendoUI Validators
You should implement desired event for the validation purpose. Here you need onChange event to work like jQuery Unobtrusive Validation. Use the following code as it describes what to do:
$(document).ready(function () {
function widgetChange() {
//place validation logic
};
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
change: widgetChange
});
})
You may want to use both of them! So take a look at .Net Mvc 3 Trigger (other than submit button) Unobtrusive Validation
Update
A dojo for implementing with last solution which added a pattern="\d+" to search input with a validation message. The validation is called by filtering event for the same input. Note that you should use desired event based on UI element, here we used filtering for autocomplete instead of using change for DropDownList.
I recently found a new implementation which is looking good to try and test. That is available at aspnet-mvc getting-started validation
Related
A simple question, or so I thought.
How to disable client side validation for kendo mvc grid?
I thought there would be a property: "Enabled", "validator" or such which I could set to false but I can't find nothing.
You're correct in that there's no way to disable the validation via a property or options setting, however, you can work around it.
The validators for the grid cells are created internally by the grid. You can disable validation by replacing the functions of the validator object in the "edit" event of the grid, after it is created, i.e.:
edit: function (e) {
// Always return valid
e.sender.editable.validatable.validate = function () { return true; };
e.sender.editable.validatable.validateInput = function(input) { return true; };
}
This should have the effect of disabling validation by always returning true.
EDIT:
You might also want to replace validateInput, I've updated the code snippet.
I'm building an app in which I'm using Django on the backend and jQuery UI/Backbone to build the front. I'm pulling a Django-generated form into a page with jQuery.get() inside of a Backbone View. That part works fine, but now I want to add some jQuery UI stuff to the form (e.g. a datepicker, some buttons that open dialogs, etc). So, here's the relevant code:
var InstructionForm = Backbone.View.extend({
render: function() {
var that = this;
$.get(
'/tlstats/instruction/new/',
function(data) {
var elements = $(data);
$('#id_date', elements).datepicker();
that.$el.html(elements.html());
}
};
return this;
}
});
The path /tlstats/instruction/new/ returns an HTML fragment with the form Django has generated. What's happening is that input#id_date is getting the hasDatePicker class added and the datepicker div is appended to my <body> element (both as expected), but when I click on input#id_date, nothing happens. No datepicker widget appears, no errors in the console. Why might this be happening?
Also, somewhat off-topic, but in trying to figure this problem out on my own, I've come across several code examples where people are doing stuff like:
$(function() {
$('#dialog').dialog(...);
...
});
Then later:
var MyView = Backbone.View.extend({
initialize(): function() {
this.el = $('#dialog');
}
});
Isn't this defeating the purpose of Backbone, having all that jQuery UI code completely outside any Backbone structure? Or do I misunderstand the role of Backbone?
Thanks.
I think your problem is right here:
$('#id_date', elements).datepicker();
that.$el.html(elements.html());
First you bind the datepicker with .datepicker() and then you throw it all away by converting your elements to an HTML string:
that.$el.html(elements.html());
and you put that string into $el. When you say e.html(), you're taking a wrapped DOM object with event bindings and everything else and turning into a simple piece of HTML in a string, that process throws away everything (such as event bindings) that isn't simple HTML.
Either give .html() the jQuery object itself:
$('#id_date', elements).datepicker();
that.$el.html(elements);
or bind the datepicker after adding the HTML:
that.$el.html(elements);
that.$('#id_date').datepicker();
I am trying to set focus on the control while error occurs. I am use mvc 2.0. In Asp.net we have a property SetFoucsOnError but in MVC what is the substitute of it and how to implement ?
Well I did not get this solution. But i got an alternate option which even works :
$().ready(function() {
$("#Form").submit(function() {
$('.input-validation-error').focus();
$(".input-validation-error").each(function() {
$(this).focus();
});
});
});
I think the easiest way to do this is to use JavaScript.
The example uses jQuery and assumes controls with invalid data have a css class called input-validation-error:
$(function () {
$('form').submit(function() {
$(this).find('input.input-validation-error, select.input-validation-error')
.first()
.focus();
});
});
This will look for all input and select elements with the class input-validation-error, take the first of them and put the focus on it.
I'm using the remote validation in MVC 3, but it seems to fire any time that I type something, if it's the second time that field's been active. The problem is that I have an autocomplete box, so they might click on a result to populate the field, which MVC views as "leaving" it.
Even apart from the autcomplete thing, I don't want it to attempt to validate when they're halfway through writing. Is there a way that I can say "only run validation n milliseconds after they are finished typing" or "only run validation on blur?"
MVC 3 relies on the jQuery Validation plugin for client side validation. You need to configure the plugin to not validate on key up.
You can switch it globally off using
$.validator.setDefaults({
onkeyup: false
})
See http://docs.jquery.com/Plugins/Validation/Validator/setDefaults and the onkeyup option here http://docs.jquery.com/Plugins/Validation/validate.
For future reference, I found it's possible to do this in combination with the typeWatch plugin (http://archive.plugins.jquery.com/project/TypeWatch).
Basically what you want to do is (in my case for a slug):
/*Disable keyup validation on focus and restore it to onkeyup validation mode on blur*/
$("form input[data-val-remote-url]").on({
focus: function () {
$(this).closest('form').validate().settings.onkeyup = false;
},
blur: function () {
$(this).closest('form').validate().settings.onkeyup = $.validator.defaults.onkeyup;
}
});
$(function () {
/*Setup the typeWatch for the element/s that's using remote validation*/
$("#Slug").typeWatch({ wait: 300, callback: validateSlug, captureLength: 5 });
});
function validateSlug() {
/*Manually force revalidation of the element (forces the remote validation to happen) */
var slug = $("#Slug");
slug.closest('form').validate().element(slug);
}
If you're using the vanilla typeWatch plugin, you'll have to setup a typeWatch for every element because the typeWatch callback doesn't give you access to the current element via $(this), it only passes the value.
Alternatively you can modify the typeWatch plugin to pass in the element (timer.el) and then you can apply a delay to all.
For some reason (maybe because of conflicts with the unobtrusive plugin), hwiechers' answer didn't work for me. Instead, I had to get the validator of my form with .data('validator') (as mentioned in this answer) and set onkeyup to false on it.
var validator = $('#form').data('validator');
validator.settings.onkeyup = false;
We had the same problem of focusing out the autocomplete textbox "DealingWithContactName" when autocomplete suggestion list pops up. Here we select the dynamically generated autocomplete list item on which the user clicks and set focus on to it. After 50ms we take the focus out from the textbox. It solved our problem.
$('body').on('click', 'ul.ui-autocomplete li a', function () {
$('#DealingWithContactName').focus();
window.setInterval(function () {
$('#DealingWithContactName').blur();
}, 50);
});
I wanted local validation to remain during onkeyup so that the user had a tighter feedback loop. This should only affect the remote validation (that results from RemoteAttribute):
$("[data-val-remote]").keyup(function () {
// Avoid hitting server validation during onkeyup. Wait for onfocusout.
return false;
});
I need to add custom validation(I think) for validating input from an user. Here's my use case:
I'm using the jquery ui datepicker for selecting dates, with localization like this:
$.datepicker.setDefaults( $.datepicker.regional[ currentLocale ] );
I use the bassistance validation plugin, and using rules for date:true and such does not work with different formats(or if they do please tell me how!). So I've made my own date validation methods like this
$.validator.addMethod("validDate", function(value) {
return parseDateString(value) != null;
}, jQuery.validator.messages.date);
This all works very well except for the fact when selecting a date in the datepicker the validation is fired before the value of the componet is changed! So I actually validate the previous value....
Does anyone have a solution for me?
Thanks in advance:)
You could trigger validation upon the user closing the datepicker popup:
$("#birthdate").datepicker({
onClose: function() {
/* Validate a specific element: */
$("form").validate().element("#birthdate");
}
});
Using validate's element() function will enable you to validate a particular field immediately.
I've created an example here in which any date who's year != 2011 will trigger failed validation.