can KendoUI grid enforce minlength validation. I have some troubles with it. Look at the screenshot.
I have set minlength and maxlength. It doesn't allow me to enter more than 10 letters, however, I can enter less than 2 letters and update the entry in grid.
Is this Kendo issue?
As mentioned in my comments, minlength doesn't work because that attribute doesn't exist in HTML5 whereas maxlength does.
Instead, you have to use custom validation, or use the pattern attribute.
Pattern Attribute
my_name {
validation: {
required: true,
pattern:'.{2,10}'
}
},
This means that my_name must be between 2 to 10 characters. It will allow you to type less or more, but will throw invalid message when you try to update.
Custom Validation:
my_name {
validation: {
required: true,
lengthRule: function (input) {
if (input.is("[name='DirectionName']") && input.val() !== "") {
input.attr("data-lengthRule-msg", "My Name must be between 2 to 10 characters.");
return (input.val().length<=10 && input.val().length>=2);
}
return true;
},
}
},
With the latter method, there is a known bug, so I am not to keen on using the latter method.
Custom Valiation Bug FYI: Validation is not always triggered when editing with backspace
Related
I'm using webix as my JavaScript front end.
I've created a form with a colorpicker view. In Webix, by default, the colorpicker only allows users to pick from a pre-selected range of colors, and returns the hex code of the color selected.
This behavior can be overridden to allow entering of any color by using the option editable: true. However, editable: true allows users to enter anything into the colorpicker as if were a free text field.
I'm trying to use a custom validation to work around this. I should be able to return false in the custom validation function to alert the user user of an invalid value and to prevent the form from being saved until it's fixed. However, the custom validation function never gets called when used on the colorpicker.
Here's a webix snippet of what I'm trying:
https://snippet.webix.com/28oadxzl
webix.ui({
view:"form",
id: "theForm",
name: "theForm",
elements:[
{
view:"colorpicker",
label:"color",
name:"color",
id: "color",
editable: true,
validate: webix.rules.iscolor,
on: {
onChange: function(newv, oldv) {
// this gets called every time the color picker is changed.
webix.message({text: "onChange: " + newv})
this.validate();
}
}
},
{
view:"button",
type:"form",
value:"ok",
width:200,
align:"right",
click: function() {
// this gets called when the "ok" button is clicked.
webix.message({text: "click"});
$$("theForm").validate();
}
}
],
rules: {
iscolor: function(value) {
// never gets called! Should be called on colorpicker change and on "ok" click.
return false; // replace with regex hexcode validation.
webix.message({text: "iscolor: " + value})
}
}
});
You were almost right: https://snippet.webix.com/4mw3mxk8
The thing is that:
as a key in rules, you must use the name of the control ("color" in your case)
webix.rules includes only predefined validation rules (isEmail, isNotEmpty, etc)
Is there any way to impose a maxLength text allowed in an ag-grid cell, similar to the one on a normal input element?
<input maxlength="220"/>
No relative documentation was found. Also, no particular situations & more details are needed, in my opinion. Thank you!
agGrid's documentation really isn't clear on this, but it is possible.
agGrid MaxLength
In your column definitions, just add something like this:
this.columnDefs = [
{
field: 'Surname',
minWidth: 100,
editable: true,
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: { maxLength: 200 }
}
Yes, you can control the full flow of input data, but you have to create your own cellEditor for that.
So - it shouldn't be hard to make a simple input validation.
and to achieve your requirements you have to take care of one function within the component:
// Gets called once when editing is finished (eg if enter is pressed).
// If you return true, then the result of the edit will be ignored.
isCancelAfterEnd?(): boolean;
isCancelAfterEnd() {
return !this.isValid(this.eInput.value);
}
isValid(value) {
return value.length <= this.maxLength;
}
Demo
Is it possible to use a dropdown column in a HandsOnTable without the editable textbox?
I know you can set the type to dropdown and it will validate/highlight red when you enter an invalid value, but is there a way to completely disable text entry for dropdown columns? It seems just using the readOnly property on the column blocks the dropdown altogether.
As you said, the readOnly option will disable you dropdown. So I believe the closest solution you can use is the allowIndvalid = false (true by default) :
allowInvalid: true (optional) - allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell
allowInvalid: false - does not allow manual input of value that does not exist in the source. In this case, the ENTER key is ignored and the editor field remains opened.
Documentation Link
You can use this JSFiddle to quickly check this option
I have the same issue and was able to resolve it with such steps. Maybe this could help:
1 when creating columns add a special className to the necessary column type:
{
data: 'priceUnitsName',
type: 'dropdown',
invalidCellClassName: 'colored',
source: Object.keys(unitNames),
width: 100,
className: 'disable-edit',
}
2 Subscribe to events to handle cancel editing:
private targetCell: HTMLTableCellElement;
public settings: GridSettings = {
// your settings
afterOnCellMouseDown: (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement) => {
this.targetCell = TD;
},
afterBeginEditing: (row: number, column: number) => {
if (this.targetCell.classList.contains('disable-edit')) { // this handle only necessary columns with special class
setTimeout(() => {
const inputCollection: HTMLCollection = document.getElementsByClassName('handsontableInput');
Array.from(inputCollection).forEach((input: HTMLTextAreaElement) => {
input.blur(); // this calls blur on element manually
});
});
}
},
Maybe this is not the best decision, but by default, handsontable can't make dropdown elements readonly with leaving open-close dropdown functional and I can't find any workable suggestion with this.
Checked on 'dropdown' and 'date' types, and it works.
While using the jQuery Validation plugin I'm trying to do a conditional validation on a text box. The rules for the text box are these: 1) required and needs to be within a range of 1-90 if the first radio button is marked. 2) if the second radio button is checked, the text box does not need to be considered.
So I've got the following code written for handing the required on the check of the first radio button:
$("#Form").validate({
rules: {
daysInputBox: {
required: {
depends: function () {
return $('input:radio[name=days]:checked');
},
messages: {
required: 'This field is required.'
}
}
}
}
});
Yet, when the code moves on to calling if the form is valid, I always get a true value back. Is there some black magic I'm missing here in making this validation work correctly?
have you tried making sure your depends function returns boolean value:
...
depends: function () {
return $('input:radio[name=days]:checked').length !== 0;
},
...
I'm guessing that with the impending changes to the way Kendo's forums work (only paid customers) there's going to be little chance of getting a question answered on there, so I'll try here instead...
I've setup an editable grid that's using custom validators for two numeric fields. The validators use an ajax query obtain valid parameters (but I don't think that's important).
This is all working, but I need the NumericTextBoxes to support 4 decimal places, which they don't by default.
I've created custom Grid editors for these fields and this allows me to enter 4 decimal places, but it breaks the custom validation.
How can I get the NumericTextBoxes to support 4 decimal places in edit mode AND allow custom validation rules?
Thanks in advance
Here's the field definition, with validator that I'm using:
end: { type: 'number', validation: {
end: function(input){
if (input.attr('name')=='end' && $('input[name=lookup]').val()!=''){
$.ajax({
type: 'post',
url: '/ajax/lookupParams',
data: { lookup:$('input[name=lookup]').val(), csrf_token: token },
success: function(data) {
start = data.start;
end = data.end
},
dataType: 'json',
async: false
});
input.attr('data-end-msg', 'End must be between '+start+' and '+end);
return (input.val() >= start && input.val() <= end);
}
return true;
}
}
This bit works -- ajax is used to retrieve valid start and end values, based on the current value of the lookup field. It just stops working if I use a custom editor to support 4 decimal places.
KendoUI NumericTextBoxes supports 4 decimal and validations:
Having the following HTML:
<input id="num" value="123.456789"
data-format="n4"
data-decimals="4"
data-step="0.0001"
data-role="numerictextbox"/>
and the following initialization:
$("#num").kendoValidator({
rules :{
custom:function (input) {
var val = Math.floor(input.val() * 10000);
return val % 2;
}
},
messages:{
custom:"Your number * 10000 needs to be odd"
}
});
kendo.init($("#num"));
This defines a NumericTextBox with four digits -both in visualization and edition mode- and with a custom Validator that check that the last digit of your decimal number is odd.
And by the way, Welcome to KendoUI on Stack Overflow!!