- Notifications
You must be signed in to change notification settings - Fork10
Javascript based form validation library, third party library / framework agnostic.
License
Lemoncode/lcFormValidation
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
LcFormValidation is a small JavaScript library that provides you form validation. Validate your viewmodel either on client or server side with Node.js.It is third party / framework agnostic, so you can easily add it in your stack, but it integrates quite well with libraries like React / Redux.
- Heavily based on JavaScript (no html attributes annotations).
- Full async, all validations are processed as async using nativePromises (LcFormValidation already gives you a polyfill for browsers that do not support promises).
Check the full documentation ingithub.io page.
import{createFormValidation,Validators}from'lc-form-validation';constcustomerFormValidationConstraints={fields:{firstName:[// Mandatory field{validator:Validators.required},],lastName:[// Mandatory field{validator:Validators.required}]}};
Create a form validation instance
constcustomerFormValidation=createFormValidation(customerFormValidationConstraints);
constviewModel={login:'jdoe@example.com',password:'jdoe3981'};customerFormValidation.validateForm(viewModel).then((validationResult)=>{console.log(validationResult.success);// trueconsole.log(validationResult.formGlobalErrors);// []console.log(validationResult.fieldErrors);/*{ firstName: { succeeded: true, type: "REQUIRED", key: "firstName", errorMessage: "" }, lastName: { succeeded: true, type: "REQUIRED", key: "lastName", errorMessage: "" } }*/}).catch((error)=>{// handle unexpected errors});
// Successful validationcustomerFormValidation.validateField(null,'firstName','John').then((validationResult)=>{console.log(validationResult.succeeded);// trueconsole.log(validationResult.type);// "REQUIRED"console.log(validationResult.key);// "firstName"console.log(validationResult.errorMessage);// ""}).catch((error)=>{// handle unexpected errors});// Unsuccessful validationcustomerFormValidation.validateField(null,'lastName','').then((validationResult)=>{console.log(validationResult.succeeded);// falseconsole.log(validationResult.type);// "REQUIRED"console.log(validationResult.key);// "lastName"console.log(validationResult.errorMessage);// "Please, fill in this mandatory field."}).catch((error)=>{// handle unexpected errors});
AddeventsFilter with on or more events:
import{createFormValidation,Validators,FieldValidationResult}from'lc-form-validation';constloginFormValidationConstraints={fields:{login:[// Mandatory field{validator:Validators.required},// It has to be a valid email address{validator:Validators.emaileventsFilter:{onBlur:true},// <-- apply a filter}]}};constloginFormValidation=createFormValidation(loginValidationConstraints);
Trigger field validation:
loginFormValidation.validateField(null,'login','jdoe',{onBlur:true}).then((validationResult)=>{console.log(validationResult.succeeded);// falseconsole.log(validationResult.type);// "EMAIL"console.log(validationResult.key);// "login"console.log(validationResult.errorMessage);// 'Please enter a valid email address.'}).catch((error)=>{// handle unexpected errors});
Not passing
eventsFilteras third parameter results in{ onChange: true }by default.
You can pass custom parameters that will be injected into the validator using thecustomParams property:
constloginFormValidationConstraints={fields:{login:[// Mandatory field{validator:Validators.required},// It has to be a valid email address{validator:Validators.email},{validator:Validators.pattern,customParams:{// login must belong to "lemoncode.net" domainpattern:/\@lemoncode.net$/}}]}};
A field validator must return aFieldValidationResult. You can pass the entireviewModel if you need to validate a field based on other fields:
functionallowLowerCaseOnly(value,viewModel,customParams){constisValid=value.toLowerCase()===value;consterrorMessage='Field must be lowercase.';constvalidationResult=newFieldValidationResult();validationResult.succeeded=isValid;validationResult.errorMessage=isValid ?'' :errorMessage;validationResult.type='LOWER_CASE';returnvalidationResult;}
Apply inside your constraints:
constsignupValidationConstraints={fields:{username:[{validator:allowLowerCaseOnly}]}};
A global validator will accept the entire viewModel and return aFieldValidationResult. Put your global validators insideglobal property of your validation constraints. It is useful, e.g., for validating dynamic properties:
functionvalidateQuestions(questions){// All questions must be answered.returnquestions.every((question)=>question.answer.trim().length>0);}functionquestionsValidator(viewModel){constisValid=validateQuestions(viewModel.questions);consterrorMessage='You must answer all questions.';constvalidationResult=newFieldValidationResult();validationResult.succeeded=isValid;validationResult.errorMessage=isValid ?'' :errorMessage;validationResult.type='';returnvalidationResult;}consttestFormValidationConstraints={global:[questionsValidator]};consttestFormValidation=createFormValidation(testFormValidationConstraints);constviewModel={questions:[{id:29,title:'What method does merge two or more objects?',anwser:'Object.assign'},{id:14,title:'What character do you need to do string interpolation?',anwser:'Backticks'},{id:42,title:'How to solve 0.1 + 0.2 === 0.3?',anwser:'+(0.1 + 0.2).toFixed(1)'},{id:85,title:'What month will new Date("2017", "04", "19").getMonth() produce?',anwser:'May'},]};testFormValidation.validateForm(viewModel).then((validationResult)=>{console.log(validationResult.succeeded);// trueconsole.log(validationResult.formGlobalErrors)// []console.log(validationResult.fieldErrors);// {}}).catch((error)=>{// handle unexpected errors});
Simple form (ES6,TypeScript)
A simple form with fullname and password fields. Applied validations:
- Both fullname and password fields are mandatory (required validator + custom validator).
Signup form (ES6,TypeScript)
A sign up form with username, password and confirm password fields with the next validation constraints:
- username is mandatory and has to not exist on GitHub (required validator + custom validator).
- password is mandatory and has to be minimum 4 characters length (minLength validator).
- confirm password is mandatory and has to be the same value as password field (custom validator).
Quiz form (ES6,TypeScript)
A simple quiz with three options where there has to be at least one checked option to pass the validation (custom global validation).
Shopping form (ES6)
A little shopping form where the user has to select a product with a version and optionally apply a discount code and enter its NIF. Validations applied:
- The brand and product fields are mandatory (required validator).
- The discount code is optional but needs to have a valid format if fulfilled (pattern validator).
- NIF field is mandatory with a valid format (required validator + custom validator
Form validation is a complex issue, usually we can find solutions that cover the simple scenarios and are focused on building RAD development just by adding some attributes / annotations to given fields or HTML fields (e.g. input), the disadvantage that we have found to this approach:
There are different approaches for each scenario: sometimes you have to add some tweaking for async validations, some other take care of special scenarios (like validations that depends on more than one field).
Usually you can easily unit test one validation (directive / annotation), but testing the whole form is a complex task (directives are coupled to e.g. HTML).
Validations are tightly coupled to e.g. directives or markup is not easy to reuse this validation code in e.g. server side (universal javascript).
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info:http://lemoncode.net/master-frontend
About
Javascript based form validation library, third party library / framework agnostic.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.