0.0.28 β’ Published 11 months ago
ionform v0.0.28
IonForm a super lightwieght form component Readme π
This package is under development the api is likely to change. Stable releases will start with versions equal to or greater than 1. A working demo is running in index.html
Get Started π
Use the custom ion-form tag anywhere in your code. Make sure to give your form a unique name.
<ion-form formname="myForm"></ion-form>
Prebuilt Components/Templates/Form π₯
Everything works out of the box. No configuration required.β¨
Import the package into your Vanilla, Angular, React, or Vue Framework.
in your tsConfig set 'allowSyntheticDefaultImports' to true, this is for password-validator "allowSyntheticDefaultImports": true,
import { IonForm} from 'ion-forms';
const myForm = IonForm('myForm');
const stringKeyValuePairs: StringDictionary
= {
"name": 'mazda',
"color": 'purple'
};
myForm.createForm({
jsonForm: stringKeyValuePairs
});
Once you're done, that's it.
Your field validation is a simple callback that takes the name of your input. π.
The callback provides you a fieldState π€―
The fieldState provides you π‘
An updated value of your input βοΈ
An helper html element βοΈ
An error html element βοΈ
The current state of each input βοΈ
An allValid boolean βοΈ
Validator methods βοΈ
A lnkField method for dependent adjacent field values βοΈ
π¦The fieldValidate function must return a boolean
const stringKeyValuePairs: StringDictionary =
{
"password": 'mypassword',
"repeatPassword": ''
};
myForm.createForm({ jsonForm: stringKeyValuePairs });
myForm.fieldValidate('repeatPassword', async (fieldState: FieldValidationResponse): Promise<boolean> => {
const { value, validator, helper, error, linkField }:{
value: string;
validator: any;
helper?: HTMLIonNoteElement;
error?: HTMLIonNoteElement;
linkField?: (name: string) => string | null; } = fieldState;
if (linkField) {
const link = linkField('password');
if (link === value) {
fieldState.helper.innerText = 'do your thing bro!';
if (fieldState.value.length > 3) {
return true;
}
fieldState.error.innerText = 'get your password right, you bad password typier!';
return false;
}
}
return false;
});
field validation with dynamic helper and error messages
myForm.fieldValidate('name', async (fieldState: HTMLIonInputElement | FieldValidationResponse): Promise<boolean> => {
const {
value,
validator,
helper,
error,
linkField
} :
{
value: string;
validator: any;
helper?: HTMLIonNoteElement;
error?: HTMLIonNoteElement;
(fieldName: string) => string;
} = fieldState;
if (validator.isEmail(value)) {
helper.textContent = 'congrats! your email is now correct';
return true;
}
error.textContent = 'it needs to be an email my friend';
return false;
});
entire form validation
on valid form changes, the values appear on onFormChange
no updates are propagated on pristine or invalid values
If a form contains the original values after having been dirtied, the from is reset to its pristine state and no form change is triggered for that input.
myForm.onFormChange((formChange: ValidFormResponse): boolean => {
const {changes, event, completeForm,
states, allValid}: {changes: Map<string, string>;
event: Event;
completeForm: Map<string, string>;
states: Map<string, boolean>;
allValid: boolean;} = formChange;
if(allValid)
{
// do something;
return true;
}
return false;
});
generate the HTML schema.
limitations
Where Buttons are nesseary, only one button per form.
const detailedSchema = [
{name:'first',value:'none',disabled: 'true', type: 'text', tagName: 'input' },
{name:'last', value:'', disabled: 'true', type: 'text', tagName: 'input' },
{name:'email', value:'', disabled: 'true', type: 'text', tagName: 'input' },
{name:'phone', value:'', disabled: 'true', type: 'text', tagName: 'input' },
{name:'postcode', value:'', disabled: 'false', type: 'text', tagName: 'input' },
{ name:'housenumber', value:'' disabled: 'false', type: 'text', tagName: 'ion-input' },
{ name:'age', value:'', disabled: 'false', type: 'text', tagName: 'ion-input' },
{name:'submit', disabled: 'false', type: 'button', tagName: 'ion-button' }
]
conversely you can specify your validator function in your schemaDictionary
make sure to check the fieldState options to see if they are available.
const schemaDictionary = {
first:
{ disabled: 'true', type: 'text', tagName: 'input', validator: function(fieldState: HTMLIonInputElement | FieldValidationResponse) {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
if(helper){
return true
}
return false;
}
}
}
Use your favorite validation tools π§βπ§, and get that validation satisfaction! π
validator.js π£
password-validator π£
define a custom validation schema π
Check the fieldState hooks/options to see if they are available πͺ
const validationSchema = {
first: async (fieldState: HTMLIonInputElement | FieldValidationResponse): Promise<boolean> => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
if(value){
const first: string = value;
return first.length > 2 && first.length < 20;
}
return false;
},
username:
async (fieldState: HTMLIonInputElement | FieldValidationResponse): Promise<boolean> => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const first: string = value;
return first.length > 2 && first.length < 20;
},
last: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const last: string = fieldValue.value;
return last.length > 2 && last.length < 20;
},
email: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const email: string = value;
return validator.isEmail(email);
},
age: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const age: number = +value;
return age >= 18;
},
postcode: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const zip: string = value;
const validZipTest = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
return validZipTest.test(zip);
},
state: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const state: string = value;
return state.length > 1;
},
city: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const city = value;
const rgx = /(^[a-zA-Z',.\s-]{1,25}$)/;
return rgx.test(city);
},
housenumber: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const nums = value;
return nums.length && !isNaN(+nums);
},
password: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const password = fieldValue.value;
if(passwordValidator){
const schema = new passwordValidator();
schema
.is().min(8) // Minimum length 8
.is().max(100) // Maximum length 100
.has().uppercase() // Must have uppercase letters
.has().lowercase() // Must have lowercase letters
.has().digits(2) // Must have at least 2 digits
.has().not().spaces() // Should not have spaces
.is().not().oneOf(['Passw0rd', 'Password123']);
return schema.validate(password)
}
return false;
},
upc: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
return validateUPC(value);
},
repeatpassword: (fieldState: HTMLIonInputElement | FieldValidationResponse): boolean => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const repeatedValue = value;
const originalValue = fieldValue.shadowRoot.querySelector('[name="password"]')
return originalValue === repeatedValue;
},
phone: async (fieldState: HTMLIonInputElement | FieldValidationResponse): Promise<boolean> => {
const { value, validator, passwordValidator, helper, error, linkField } = fieldState;
const phone = value;
return validator.isMobilePhone(phone, 'en-US');
},
};
const detailedSchema = [
{ name: 'first', value: 'Pillsbury', type: 'text', tagName: 'input', validator: validationSchema.first },
{ name: 'last', value: 'Doughboy', disabled: 'true', type: 'text', tagName: 'input', helper: 'enter your last name', validator: validationSchema.last },
{ name: 'email', value: 'Eat@it.com', disabled: 'false', type: 'text', helper: 'enter your email', tagName: 'input', validator: validationSchema.email },
{ name: 'phone', value: '9494548213', disabled: 'true', type: 'text', tagName: 'input', validator: validationSchema.phone },
{ name: 'age', value: '55', disabled: 'false', type: 'text', tagName: 'ion-input', validator: validationSchema.age },
{ name: 'postcode', value: '', disabled: 'false', type: 'text', tagName: 'input', validator: validationSchema.name },
{ name: 'city', disabled: 'false', type: 'text', tagName: 'ion-input', value: 'city', validator: validationSchema.city }
];
form2.createForm({ detailedSchema: detailedSchema })
0.0.20
11 months ago
0.0.21
11 months ago
0.0.22
11 months ago
0.0.24
11 months ago
0.0.25
11 months ago
0.0.18
11 months ago
0.0.19
11 months ago
0.0.26
11 months ago
0.0.27
11 months ago
0.0.28
11 months ago
0.0.17
1 year ago
0.0.10
1 year ago
0.0.11
1 year ago
0.0.12
1 year ago
0.0.13
1 year ago
0.0.14
1 year ago
0.0.3
1 year ago
0.0.15
1 year ago
0.0.9
1 year ago
0.0.16
1 year ago
0.0.8
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago