I have this fantastic little plugin working but I need to require that at least one name be selected. I normally use jquery.validate. However, the validation plugin does not appear to work on a field using the tokeninput. Does anyone have an answer? As always, thanks so much for your help.
$("#NewMessage").validate({
rules: {
name: {
required: true
}
}
});
$("#name").tokenInput("lookup.cfc?method=getNames&returnFormat=json", {
hintText: "Type in the name of recipient(s)",
noResultsText: "No results",
searchingText: "Searching..."
})
I had the same issue and solved it overriding ignore (apparently the problem is that tokenInput hides the original input and by default "validate" doesn't validate hidden inputs)
$("#NewMessage").validate({
ignore: "",
rules: {
name: {
required: true
}
}
});
I wrote and tried,It's working fine to me.
jQuery.validator.addMethod("autocomplete_check", function(value, element) {
return ( value != '' ) ? true : false;
}, "");
$("#NewMessage").validate({
ignore: "",
rules: {
name: {
autocomplete_check: true
}
},
messages: {
autocomplete_check: "Please fill the name"
}
});
Related
here is my KendoGrid :
$scope.gridEltCompoOptions = {
dataSource: {
transport: {
...
},
schema: {
model: {
id: 'IdElement',
fields: {
GroupeActes: { defaultValue: { IdGroupeActes: null, Libelle: ' ' } }
}
}
}
},
sortable: true,
resizable: true,
filterable: {
mode: 'row'
},
columns: [{
field: 'GroupeActes',
title: "Groupe d'actes",
template: function (dataItem) {
return kendo.toString(dataItem.GroupeActes.Libelle);
}
}, ]
I want to filter my field 'GroupeActes' on the property Libelle (GroupeActes is an object), but actually the filter take the entire object.
When i try to filter, i have a Js Error
Uncaught TypeError: (d.GroupeActes || "").toLowerCase is not a function
The problem is clear, the filter is taking the entiere object, not the property Libelle.
i passed the last 4 hours to try all the solutions i found on google but nothing is working
my object GroupeActes is like this :
var GroupeActes = {
GroupeActes : {
Libelle : ""
}
}
there is two groupeActes level
I saw a post in 2015 of an Admin, saying this kind of filter isn't possible,
but i saw also this kind of solution :
https://docs.telerik.com/kendo-ui/knowledge-base/grid-filter-column-with-dropdownlist
(if(e.field == "Category" && e.filter !== null){) in the example
i tried to do something like : if field == "groupeActes" => so i want to filter on Libelle properties,
but i didn't success
Can someone help me please ?
thank you so much
Have you looked at this article: https://docs.telerik.com/kendo-ui/knowledge-base/enable-operations-for-object-column
I believe you can accomplish what you want by setting the column field to "GroupeActes.Libelle" instead of using a column template:
columns: [
{
field: 'GroupeActes.Libelle',
title: "Groupe d'actes",
},
],
See this DEMO:
Please Refer to my plunkr
I've been playing around with the new Angular 2 RC and I think I have figured out how the form validation works.
First I build 2 objects called defaultValidationMessages and formDefinition
private defaultValidationMessages: { [id: string]: string };
formDefinition: {
[fieldname: string]:
{
displayName: string,
placeholder: string,
currentErrorMessage: string,
customValidationMessages: { [errorKey: string]: string }
defaultValidators: ValidatorFn,
defaultValue: any
}
};
Then I load up those objects with the default validators and field information. and build the ControlGroup from the formDefinition object.
this.defaultValidationMessages = {
'required': '{displayName} is required',
'minlength': '{displayName} must be at least {minlength} characters',
'maxlength': '{displayName} cannot exceed {maxlength} characters',
'pattern': '{displayName} is not valid'
}
this.formDefinition = {
'name': {
displayName: 'Name',
placeholder: '',
currentErrorMessage: '',
customValidationMessages: {},
defaultValidators: Validators.compose(
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(50)
]),
defaultValue: this.person.name
},
'isEmployee': {
displayName: 'Is Employee',
placeholder: '',
currentErrorMessage: '',
customValidationMessages: {},
defaultValidators: Validators.compose([]),
defaultValue: this.person.isEmployee
},
'employeeId': {
displayName: 'Employee Id',
placeholder: '',
currentErrorMessage: '',
customValidationMessages: { 'pattern': '{displayName} must be 5 numerical digits' },
defaultValidators: Validators.compose(
[
Validators.pattern((/\d{5}/).source)
]),
defaultValue: this.person.employeeId
}
}
this.personForm = this.formBuilder.group({});
for (var v in this.formDefinition) {
this.personForm.addControl(v, new Control(this.formDefinition[v].defaultValue, this.formDefinition[v].defaultValidators));
}
this.personForm.valueChanges
.map(value => {
return value;
})
.subscribe(data => this.onValueChanged(data));
Using a technique that I learned from Deborah Kurata's ng-conf 2016 session I bind a method to the ControlGroups valueChanges event.
By defining sets of default validators on each control it allows the control to dynamically append new validators to it based on future action. And then clearing back to the default validators later.
Issue I still have.
I was having an issue getting my typescript intellisense to import the ValidatorFn type. I found it here but I don't think I'm suppose to access it like this:
import { ValidatorFn } from '../../../node_modules/#angular/common/src/forms/directives/validators'
I also had to reset the form by setting some internal members. Is there a better way to reset the form? see below:
(<any> this.programForm.controls[v])._touched = false;
(<any> this.programForm.controls[v])._dirty = false;
(<any> this.programForm.controls[v])._pristine = true;
Please look at my plunk and let me know if there is a better way to handle model driven dynamic form validation?
My import string looks like this and it isn't marked as an error.
import { ValidatorFn } from '#angular/common/src/forms/directives/validators';
And some info about the reset form issue. There is not proper reset feature available yet, but a workaround exists. I've found it in docs.
You need a component field
active: true;
and you need to check it in your form tag:
<form *ngIf="active">
After that you should change your personFormSubmit() method to:
personFormSubmit() {
this.person = new Person();
this.active = false;
setTimeout(()=> {
this.active=true;
this.changeDetectorRef.detectChanges();
alert("Form submitted and reset.");
}, 0);
}
I tried this solution with you plnkr example and seems that it works.
I'm trying to validate fields in my form, but I keep getting an error message.
Here is my code:
Ext.define('ExtDoc.views.extfields.FieldsValidator',{
valEng: function(val) {
var engTest = /^[a-zA-Z0-9\s]+$/;
Ext.apply(Ext.form.field.VTypes, {
eng: function(val, field) {
return engTest.test(val);
},
engText: 'Write it in English Please',
// vtype Mask property: The keystroke filter mask
engMask: /[a-zA-Z0-9_\u0600-\u06FF\s]/i
});
}
});
And I define my field as follow:
{
"name": "tik_moed_chasifa",
"type": "ExtDoc.views.extfields.ExtDocTextField",
"label": "moed_hasifa",
"vtype": "eng",
"msgTarget": "under"
}
The first snippet is in a separate js file, and I have it in my fields js file as required.
When I start typing text in the text field, I keep seeing the following error msg in the explorer debugger:
"SCRIPT438: Object doesn't support property or method 'eng' "
What could it be? Have I declared something wrong?
You have defined your own class with a function valEng(val), but you don't instantiate it, neither do you call the function anywhere.
Furthermore, your function valEng(val) does not require a parameter, because you are not using that parameter anywhere.
It would be far easier and more readable, would you remove the Ext.define part and create the validators right where you need them. For instance if you need them inside an initComponent function:
initComponent:function() {
var me = this;
Ext.apply(Ext.form.field.VTypes, {
mobileNumber:function(val, field) {
var numeric = /^[0-9]+$/
if(!Ext.String.startsWith(val,'+')) return false;
if(!numeric.test(val.substring(1))) return false;
return true;
},
mobileNumberText:'This is not a valid mobile number'
});
Ext.apply(me,{
....
items: [{
xtype:'fieldcontainer',
items:[{
xtype: 'combobox',
vtype: 'mobileNumber',
Or, you could add to your Application.js, in the init method, if you need it quite often at different levels of your application:
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
views: [
],
controllers: [
],
stores: [
],
init:function() {
Ext.apply(Ext.form.field.VTypes, {
mobileNumber:function(val, field) {
var numeric = /^[0-9]+$/
if(!Ext.String.startsWith(val,'+')) return false;
if(!numeric.test(val.substring(1))) return false;
return true;
},
mobileNumberText:'This is not a valid mobile number'
});
}
I am working on populating kendo--grid with APIs data but on adding validation on one field is automatically working for every other fields too.
Here is schema inside kendo-dataSource :
schema: {
model: {
id : "id",
fields: {
id: { editable: false, type: 'number'},
name: { editable: true, type : "string" },
unique_url: { editable: true , type: 'string'},
image_url : { editable: true, type : "string" },
title: {type : "string", validation: {
required: true,
validateTitle: function (input) {
console.log("I am inside validation",input.val());
if (input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
return true;
}
}
},
body: { editable: true, type : "string",validation: { max: 90, required: true, message : "Maximum characters should be 90"} },
adaccount_id: { editable: false, type: 'number'}
}
}
},
Here I have added validation for title field but its getting called for others fields too.
I am adding one snapshot of validation---
Please help me to find errors in it.
There isn't really any error in your code, but more like an error in Kendo Grid's validation design. Even though you specify the validation function only in the title field, it will run the validation globally for any input field that you edit.
In validateTitle you need to filter which input you want the validating function to run on. Something like this:
if (input.is("[name='title']") && input.val().length > 5) {
input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
return false;
}
If you need a live working demo, you can always refer to Telerik's online demos that are editable, very handy for playing around with things. Here's the demo for custom validation where they similarly have to filter the input for the field name.
you want simply required field validation means just add your view model property attributes
[Required(ErrorMessage ="CountryCode is Mandatory")]
public virtual string CountryCode
{
get;
set;
}
We can easily set the maximum length using this code,It will not allow user to enter more characters than the specified one
model: {
id: "CLASSID",
fields: {
CLASSID: { type: "number" },
CLSNAME: { type: "string" },
CLSFLAG: {
type: "string", validation: {
required: true,maxlength:"3"
}
},
CLSSTATUS: { type: "boolean" }
}
}
I'm using multiple textboxes for users to entry different credit cards#, with jquery validations. Ambiguously, only the first text box validation is working. Validation's are not working for the other boxes. There are no js errors too in error console.
It'll be very helpful if someone can please give me a clue.
//for first textbox
$("#cust_reg").validate({
rules: {
cc_num_local: {
required: true,
creditcard: true
}
}
});
//for second textbox
$("#cust_reg").validate({
rules: {
cc_num_roam: {
required: true,
creditcard: true
}
}
});
the relevant html only: http://pastie.textmate.org/2422338
You can have more then one HTML element using the id of cust_reg. If you do then only one will be available to your JavaScript code since one supersedes the other. It also isn't valid HTML. You'll need to change the name of the second field to be something different like cust_reg2.
Since you have one form and two different ID's you might try combining them in your code.
$("#cust_reg").validate({
rules: {
cc_num_local: {
required: true,
creditcard: true
},
cc_num_roam: {
required: true,
creditcard: true //Not sure if this can be the same name
}
}
});