Steps given below are for restricting the user to enter less than ten characters in one of the text field of Touch UI dialog. In this process, we will create a validator and we will register that validator correspond to that text field.
1. Create a component with touch UI dialog with at least one text field. Here in this example we are adding validation to 'First Name' text field. Where author is not allowed to enter less than 10 characters in text field.
2. Create a client library folder for that component add properties(categories and dependencies) as given below.
3. Create JS(nt:folder) folder inside clientlibs folder and add javascript file (validations.js) in JS folder.
4. Create js.txt parallel to JS folder and make an entry of 'validations.js' there.
5. Open validation.js file and copy paste the below given code. This js code works as validator for the text field.
(function($, Granite) {
"use strict";
/**
* Validator for First Name length.
*/
$(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
selector: '[data-validation="namelength"]',
validate: function(el) {
var valid = el.value;
var strLength= valid.length;
if (strLength<10) {
return Granite.I18n.get("Length should be greater than 10");
}
}
});
})(Granite.$, Granite);
6. 'namelength' used as a selector here for the registered validator. And we will hook our registered validator with this selector property only.
7. validate function will execute the logic for validation. Here its checking the length of the value entered in dialog First Name field.
8. Now to hook our registered validator with our touch UI dialog text field .We will add property 'validation' with its value 'namelength'. This is will hook our text field validation with our registered validator.
9. Now try less than 10 char in First Name field. Error message is displayed.
1. Create a component with touch UI dialog with at least one text field. Here in this example we are adding validation to 'First Name' text field. Where author is not allowed to enter less than 10 characters in text field.
2. Create a client library folder for that component add properties(categories and dependencies) as given below.
3. Create JS(nt:folder) folder inside clientlibs folder and add javascript file (validations.js) in JS folder.
4. Create js.txt parallel to JS folder and make an entry of 'validations.js' there.
5. Open validation.js file and copy paste the below given code. This js code works as validator for the text field.
(function($, Granite) {
"use strict";
/**
* Validator for First Name length.
*/
$(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
selector: '[data-validation="namelength"]',
validate: function(el) {
var valid = el.value;
var strLength= valid.length;
if (strLength<10) {
return Granite.I18n.get("Length should be greater than 10");
}
}
});
})(Granite.$, Granite);
6. 'namelength' used as a selector here for the registered validator. And we will hook our registered validator with this selector property only.
7. validate function will execute the logic for validation. Here its checking the length of the value entered in dialog First Name field.
8. Now to hook our registered validator with our touch UI dialog text field .We will add property 'validation' with its value 'namelength'. This is will hook our text field validation with our registered validator.
9. Now try less than 10 char in First Name field. Error message is displayed.
10. Check out the below link for more explanation about the same.
