jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
184 lines (173 loc) • 7.73 kB
text/typescript
/// <reference path="../../../jqwidgets-ts/jqwidgets.d.ts" />
function createValidatorFields(registerSelector, sendButtonSelector, acceptSelector, ssnInputSelector, phoneInputSelector, zipInputSelector, birthInputSelector, testFormSelector,
userInputSelector, passwordInputSelector, passwordConfirmInputSelector, realNameInputSelector, emailInputSelector, acceptInputSelector)
{
//defining Options
let registerOptions: jqwidgets.ExpanderOptions = {
toggleMode: 'none',
width: '300px',
height: '385px',
showArrow: false
};
//creating an instance
let registerInstance: jqwidgets.jqxExpander = jqwidgets.createInstance(registerSelector, 'jqxExpander', registerOptions);
//defining Options
let sendButtonOptions: jqwidgets.ButtonOptions = {
width: 60,
height: 25
};
//creating an instance
let sendButtonInstance: jqwidgets.jqxButton = jqwidgets.createInstance(sendButtonSelector, 'jqxButton', sendButtonOptions);
//defining Options
let acceptInputOptions: jqwidgets.CheckBoxOptions = {
width: 130
};
//creating an instance
let acceptInputInstance: jqwidgets.jqxCheckBox = jqwidgets.createInstance(acceptSelector, 'jqxCheckBox', acceptInputOptions);
sendButtonInstance.addEventHandler('click', function () {
validatorInstance.validate;
});
//defining Options
let maskedInputOptions: jqwidgets.MaskedInputOptions = {
mask: '###-##-####',
width: 150,
height: 22
};
let inputOptions = { width: 150, height: 22 };
let passwordInputOptions = { width: 144, height: 22 };
//creating an instance
let ssnInput: jqwidgets.jqxMaskedInput = jqwidgets.createInstance(ssnInputSelector, 'jqxMaskedInput', maskedInputOptions);
maskedInputOptions.mask = '(###)###-####';
let phoneInputInstance: jqwidgets.jqxMaskedInput = jqwidgets.createInstance(phoneInputSelector, 'jqxMaskedInput', maskedInputOptions);
maskedInputOptions.mask = '#####-####';
let zipInputInstance: jqwidgets.jqxMaskedInput = jqwidgets.createInstance(zipInputSelector, 'jqxMaskedInput', maskedInputOptions);
let userInputInstance: jqwidgets.jqxInput = jqwidgets.createInstance(userInputSelector, 'jqxInput', inputOptions);
let passwordInputInstance: jqwidgets.jqxPasswordInput = jqwidgets.createInstance(passwordInputSelector, 'jqxPasswordInput', passwordInputOptions);
let passwordConfirmInstance: jqwidgets.jqxPasswordInput = jqwidgets.createInstance(passwordConfirmInputSelector, 'jqxPasswordInput', passwordInputOptions);
let realNameInstance: jqwidgets.jqxInput = jqwidgets.createInstance(realNameInputSelector, 'jqxInput', inputOptions);
let emailInputInstance: jqwidgets.jqxInput = jqwidgets.createInstance(emailInputSelector, 'jqxInput', inputOptions);
//defining Options
let dateTimeInputOptions: jqwidgets.DateTimeInputOptions = {
width: 150,
height: 22
};
//creating an instance
let dateTimeInputInstance: jqwidgets.jqxDateTimeInput = jqwidgets.createInstance(birthInputSelector, 'jqxDateTimeInput', dateTimeInputOptions);
//defining Options
let validatorOptions: jqwidgets.ValidatorOptions = {
rules: [
{
input: userInputSelector,
message: 'Username is required!',
action: 'keyup, blur',
rule: 'required'
},
{
input: userInputSelector,
message: 'Your username must be between 3 and 12 characters!',
action: 'keyup, blur',
rule: 'length=3,12'
},
{
input: realNameInputSelector,
message: 'Real Name is required!',
action: 'keyup, blur',
rule: 'required'
},
{
input: realNameInputSelector,
message: 'Your real name must contain only letters!',
action: 'keyup',
rule: 'notNumber'
},
{
input: realNameInputSelector,
message: 'Your real name must be between 3 and 12 characters!',
action: 'keyup',
rule: 'length=3,12'
},
{
input: birthInputSelector,
message: 'Your birth date must be between 1/1/1900 and 1/1/2014.',
action: 'valueChanged',
rule: function (input, commit)
{
let date = dateTimeInputInstance.getDate();
let startDate = new Date('1/1/1900 00:00:00');
let endDate = new Date('1/1/2014 00:00:00');
let result = date > startDate && date < endDate;
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
return result;
}
},
{
input: passwordInputSelector,
message: 'Password is required!',
action: 'keyup, blur',
rule: 'required'
},
{
input: passwordInputSelector,
message: 'Your password must be between 4 and 12 characters!',
action: 'keyup, blur',
rule: 'length=4,12'
},
{
input: passwordConfirmInputSelector,
message: 'Password is required!',
action: 'keyup, blur',
rule: 'required'
},
{
input: passwordConfirmInputSelector,
message: 'Passwords doesn\'t match!',
action: 'keyup, focus',
rule: function (input, commit)
{
// call commit with false, when you are doing server validation and you want to display a validation error on this field.
if (input.val() === passwordInputInstance.val()) {
return true;
}
return false;
}
},
{
input: emailInputSelector,
message: 'E-mail is required!',
action: 'keyup, blur',
rule: 'required'
},
{
input: emailInputSelector,
message: 'Invalid e-mail!',
action: 'keyup',
rule: 'email'
},
{
input: ssnInputSelector,
message: 'Invalid SSN!',
action: 'valuechanged, blur',
rule: 'ssn'
},
{
input: phoneInputSelector,
message: 'Invalid phone number!',
action: 'valuechanged, blur',
rule: 'phone'
},
{
input: zipInputSelector,
message: 'Invalid zip code!',
action: 'valuechanged, blur',
rule: 'zipCode'
},
{
input: acceptInputSelector,
message: 'You have to accept the terms',
action: 'change',
rule: 'required',
position: 'right:0,0'
}]
};
let validatorInstance: jqwidgets.jqxValidator = jqwidgets.createInstance(testFormSelector, 'jqxValidator', validatorOptions);
}