I am creating plugin
I have this piece of code below:
What i am trying to do is make sure the email address they enter is valid.
Just not sure how to stop the onOK if the email address is not valid.
Thanks
This is a code snippet of the plugin
contents : [
{
id : 'info',
label : editor.lang.form.title,
title : editor.lang.form.title,
elements : [
{
id : 'destEmail',
type : 'text',
label : 'Email form results to:',
'default' : 'randy#me.com',
required : true,
accessKey : 'T',
commit : function( element )
{
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (this.getValue().search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
element.setAttribute('id', this.getValue() );
}
}
]
}
]
Please take a look on official sample and validate property. You can write your own validation method at this point.
You can also use one of the available (still not documented in API). You probably want to do something like this (CKEditor 4):
...
validate: CKEDITOR.dialog.validate.regex( /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i, "Please enter a valid email address." );
...
It is also possible to combine existing validators and/or write custom validators:
function customValidator( x, msg ) {
return function() {
var value = this.getValue(),
pass = !!( CKEDITOR.dialog.validate.integer()( value ) && value < x );
if ( !pass ) {
return msg;
}
};
}
...
validate: customValidator( 5, 'Error message when larger than 5.' )
...
Related
I am trying to create an input that takes a string that will be used as the href value for a tag. The href can be a url OR an email (for mailto:).
It works if I just check for email, or if I just check for URL. However, I want to check for one or the other. I am looking through yup documentation but I can't find a way to do an OR.
I noticed that there is a when to test for another field but I'm not checking if another field is true or not, or use test but I also can't seem to get it to work.
const vSchema = yup.object().shape({
text: yup.string().required(),
href: yup
.string()
.email('Link must be a URL or email')
.url('Link must be a URL or email')
.required('Link is a required field'),
});
test this
yup.addMethod(yup.string, "or", function(schemas, msg) {
return this.test({
name: "or",
message: "Please enter valid url or email." || msg,
test: value => {
if (Array.isArray(schemas) && schemas.length > 1) {
const resee = schemas.map(schema => schema.isValidSync(value));
return resee.some(res => res);
} else {
throw new TypeError("Schemas is not correct array schema");
}
},
exclusive: false
});
});
I am using semantic ui and am trying to do some form validation with it.
The scenario I have is the user has 2 options: email,or phone app verrifcation. They select one of the options and enter whatever in a text field then click submit.
However I am not sure how to do rules on this with semantic UI.
I know if I wanted to check if it was blank I could do something like this:
$('.ui.form')
.form({
fields: {
CODE: {
identifier: 'code',
rules: [
{
type : 'empty',
prompt : 'Please enter your verification code'
}
]
}
} } );
However I would like additional rules based upon which option is selected. I have javascript that currently tells me the value of what is selected, and is updated on change. Unsure how to add it into the rules though, so that I can be like -- If phone was select, must be exactly 6 chars long, or IF email was selected, must be 18 chars long (different lengths for different option).
Is there a way to have conditional rules like this? Closet I could find was:
depends: 'id'
Which checks to ensure it is not empty.
Does anyone know how to have conditional rules such as this based on another form element? I am using the most recent version of Semantic-UI
You can do so by adding custom rules.
$.fn.form.settings.rules.atLeastOne = function (value, fields) {
fieldsToCompare = fields.split(",")
if (value) {
// current input is not empty
return true
} else {
// check the other input field(s)
// atLeastOne is not empty
atLeastOne = false
for (i = 0; i < fieldsToCompare.length; i++) {
// gets input based on id
if ($("#" + fieldsToCompare[i]).val()) {
atLeastOne = true
}
}
return atLeastOne
}
}
$(".ui.form").form({
fields: {
number:{
identifier: "number",
rules: [{
type: "exactLength[6]",
prompt: "number has to be 6 chars long"
}, {
// include the input fields to check atLeastOne[email, address, ...]
type: "atLeastOne[email]",
prompt: "Please provide an email or a number"
}]
},
email: {
identifier: "email",
rules: [{
type: "exactLength[18]",
prompt: "email has to be 18 chars long"
}, {
type: "atLeastOne[number]",
prompt: "Please provide an email or a number"
}]
}
}
});
Note that the function uses the input id as the identifier and not the input name. You might also want to look at optional fields.
In a NativeScript app I have two routes as bellow :
{ path : "boxes" , component : BoxesPage } ,
{ path : "card" , component : CardPage } ,
In the BoxesPage I'm trying to pass something to CardPage like this :
constructor ( private _routerExtention : RouterExtensions , private _router : Router) {
}
onItemTap ( _box ) {
let navigationExtras : NavigationExtras = {
queryParams : { 'box' : _box } ,
fragment : 'anchor'
};
this._router.navigate( [ '/card' ] , navigationExtras );
}
Then in the CardPage component :
ngOnInit () : any {
this.route.params.subscribe( ( _box : Box ) => {
console.log( _box ); //undefined or {}
} );
return undefined;
}
Question is :
Is this the right way ?
How should I get my box object inside the CardPage ?
Worth mentioning that I'm using Angular2 withing the NativScript.
I've tried everything but the documentation is extremely poor unfortunately.
Thanks in advance.
if you want to pass complex data(Object) between one component to other component stringify the object and pass it to other component to parse JSON by using object.
app.component.ts:
public appListComponent(item: any) {
const getData: string = item;
const navigationExtras: NavigationExtras = {
queryParams: {
DataList: JSON.stringify(getData)
}
};
this.routerExtensions.navigate(["app-modal"], navigationExtras);
}
app.modal.component.ts:
public constructor(public route: ActivatedRoute) {
this.route.queryParams.subscribe((params) => {
this.getParamData = params["DataList"];
let obj: ModalData = JSON.parse(this.getParamData);
console.log("Name", obj.name);
console.log("Description", obj.description);
});
}
modaldata.ts:
export class ModalData {
name: string;
description: string;
}
You can refer my answer in this similar post: NativeScript + Angular Navigation context . Basically you do this via "route arguments" which are strings. Unfortunately you cannot pass "entire" JS/TS objects but you can implements a service which can retrieve those via the provided string arguments. For roe details and code snippets check my response in the other thread.
Here is a short intro if the other thread:
Passing objects while navigating in Angular + NativeScript is not the same as vanila NativeScript. The routing is entirely implemented via angular specifications which means you will need to use their implementation. The current RC5 version of Angular 2 uses the following navigation (routing).
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'
});
}
We have a rule that all of our validation messages must be in a summary, and thus the default "this field is required" doesn't cut it because the messages lose their context in a summary and therefore need specific field indicators.
I have a solution that I like rather well, but it soon became clear that there was a need for messages outside of just the required field (email, url, custom methods like phoneUS, etc), so I made some additions to my function.
I've been using jQuery for a while, but I'm not an expert in the optimization area, so I wanted to get some expert help on whether the function below could be optimized...my question is, "is there actually a better way to handle custom error messages in a summary?"
$('.required, .email').each(function(index) {
var $this = $(this);
var label = (
$this.is(':radio')
? $("label[data-name='"+$this.attr('name')+"']")
: label = $("label[for='"+$this.attr('id')+"']")
);
var customMessages = [{}];
if($this.hasClass('required')){
customMessages.required = "'" + label.text() + "' is required.";
}
if($this.hasClass('email')){
customMessages.email = "'" + label.text() + "' has an invalid email address.";
}
$this.rules("add", {
messages: customMessages
});
});
Here is the jsFiddle:
http://jsfiddle.net/GD5nw/1/
So why not just assign the custom message on a field-by-field basis for each field as is most typically done? It seems less verbose than what you've been doing.
http://docs.jquery.com/Plugins/Validation/validate#toptions
Example for input elements with name attribute assigned as first, second, and address.
$('#myform').validate({
rules: {
first: {
required: true
},
second: {
required: true
},
address: {
required: true,
digits: true // just an example
}
},
messages: {
first: {
required: "your first name is required"
},
second: {
required: "your last name is required"
},
address: {
required: "your address is required",
digits: "must only use digits on address"
}
}
});
Working Demo: http://jsfiddle.net/x4YBw/