All Projects → Lemoncode → Lcformvalidation

Lemoncode / Lcformvalidation

Licence: mit
Javascript based form validation library, third party library / framework agnostic.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Lcformvalidation

Php Validate
Lightweight and feature-rich PHP validation and filtering library. Support scene grouping, pre-filtering, array checking, custom validators, custom messages. 轻量且功能丰富的PHP验证、过滤库。支持场景分组,前置过滤,数组检查,自定义验证器,自定义消息。
Stars: ✭ 225 (+287.93%)
Mutual labels:  validation, validation-library, library
Easyvalidation
✔️ A text and input validation library in Kotlin for Android
Stars: ✭ 328 (+465.52%)
Mutual labels:  validation, validation-library, library
Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (+715.52%)
Mutual labels:  validation, library, form-validation
Svelte Forms Lib
📝. A lightweight library for managing forms in Svelte
Stars: ✭ 238 (+310.34%)
Mutual labels:  validation, library, form-validation
V8n
☑️ JavaScript fluent validation library
Stars: ✭ 3,858 (+6551.72%)
Mutual labels:  validation, library
React Hook Form
📋 React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+42712.07%)
Mutual labels:  validation, form-validation
Govalidator
[Go] Package of validators and sanitizers for strings, numerics, slices and structs
Stars: ✭ 5,163 (+8801.72%)
Mutual labels:  validation, validation-library
Vue Form
Form validation for Vue.js 2.2+
Stars: ✭ 618 (+965.52%)
Mutual labels:  validation, form-validation
Valiktor
Valiktor is a type-safe, powerful and extensible fluent DSL to validate objects in Kotlin
Stars: ✭ 267 (+360.34%)
Mutual labels:  validation, validation-library
Accord
Accord: A sane validation library for Scala
Stars: ✭ 519 (+794.83%)
Mutual labels:  validation, library
Formsy React
A form input builder and validator for React JS
Stars: ✭ 708 (+1120.69%)
Mutual labels:  validation, form-validation
Approvejs
A simple JavaScript validation library that doesn't interfere
Stars: ✭ 336 (+479.31%)
Mutual labels:  validation, form-validation
Validator Docs
Validação de CPF, CNPJ, CNH, NIS, Título Eleitoral e Cartão Nacional de Saúde com Laravel.
Stars: ✭ 334 (+475.86%)
Mutual labels:  validation, validation-library
Restless
Express.js api, type safe validations and more
Stars: ✭ 32 (-44.83%)
Mutual labels:  validation, library
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+11591.38%)
Mutual labels:  validation, form-validation
Laravel Vue Validator
Simple package to display error in vue from laravel validation
Stars: ✭ 32 (-44.83%)
Mutual labels:  validation, validation-library
Nice Validator
Simple, smart and pleasant validation solution.
Stars: ✭ 587 (+912.07%)
Mutual labels:  validation, form-validation
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-31.03%)
Mutual labels:  validation, form-validation
thai-citizen-id-validator
🦉 Validate Thai Citizen ID with 0 dependencies 🇹🇭
Stars: ✭ 35 (-39.66%)
Mutual labels:  validation, validation-library
svelte-form
JSON Schema form for Svelte v3
Stars: ✭ 47 (-18.97%)
Mutual labels:  validation, form-validation

lcFormValidation

build status

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 native Promises (LcFormValidation already gives you a polyfill for browsers that do not support promises).

Documentation

Check the full documentation in github.io page.

Quick start

Defining validation constraints

import { createFormValidation, Validators } from 'lc-form-validation';

const customerFormValidationConstraints = {
  fields: {
    firstName: [
      // Mandatory field
      { validator: Validators.required },
    ],
    lastName: [
      // Mandatory field
      { validator: Validators.required }
    ]
  }
};

Create a form validation instance

const customerFormValidation = createFormValidation(customerFormValidationConstraints);

Validating the entire form

const viewModel = { login: '[email protected]', password: 'jdoe3981' };
customerFormValidation
  .validateForm(viewModel)
  .then((validationResult) => {
    console.log(validationResult.success); // true
    console.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
  });

Validate a single field

// Successful validation
customerFormValidation
  .validateField(null, 'firstName', 'John')
  .then((validationResult) => {
    console.log(validationResult.succeeded); // true
    console.log(validationResult.type); // "REQUIRED"
    console.log(validationResult.key); // "firstName"
    console.log(validationResult.errorMessage); // ""
  })
  .catch((error) => {
    // handle unexpected errors
  });

// Unsuccessful validation
customerFormValidation
  .validateField(null, 'lastName', '')
  .then((validationResult) => {
    console.log(validationResult.succeeded); // false
    console.log(validationResult.type); // "REQUIRED"
    console.log(validationResult.key); // "lastName"
    console.log(validationResult.errorMessage);
    // "Please, fill in this mandatory field."
  })
  .catch((error) => {
    // handle unexpected errors
  });

Trigger certain validations in each constraint:

Add eventsFilter with on or more events:

import {
  createFormValidation,
  Validators,
  FieldValidationResult
} from 'lc-form-validation';

const loginFormValidationConstraints = {
  fields: {
    login: [
      // Mandatory field
      { validator: Validators.required },
      // It has to be a valid email address
      {
        validator: Validators.email
        eventsFilter: { onBlur: true }, // <-- apply a filter
      }
    ]
  }
};
const loginFormValidation = createFormValidation(loginValidationConstraints);

Trigger field validation:

loginFormValidation
  .validateField(null, 'login', 'jdoe', { onBlur: true })
  .then((validationResult) => {
    console.log(validationResult.succeeded); // false
    console.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 eventsFilter as third parameter results in { onChange: true } by default.

Passing extra arguments

You can pass custom parameters that will be injected into the validator using the customParams property:

const loginFormValidationConstraints = {
  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" domain
          pattern: /\@lemoncode.net$/
        }
      }
    ]
  }
};

Custom validators

Field validator

A field validator must return a FieldValidationResult. You can pass the entire viewModel if you need to validate a field based on other fields:

function allowLowerCaseOnly(value, viewModel, customParams) {
  const isValid = value.toLowerCase() === value;
  const errorMessage = 'Field must be lowercase.';
  const validationResult = new FieldValidationResult();
  validationResult.succeeded = isValid;
  validationResult.errorMessage = isValid ? '' : errorMessage;
  validationResult.type = 'LOWER_CASE';

  return validationResult;
}

Apply inside your constraints:

const signupValidationConstraints = {
  fields: {
    username: [
      { validator: allowLowerCaseOnly }
    ]
  }
};

Global form validator

A global validator will accept the entire viewModel and return a FieldValidationResult. Put your global validators inside global property of your validation constraints. It is useful, e.g., for validating dynamic properties:

function validateQuestions(questions) {
  // All questions must be answered.
  return questions.every((question) => question.answer.trim().length > 0);
}

function questionsValidator(viewModel) {
  const isValid = validateQuestions(viewModel.questions);
  const errorMessage = 'You must answer all questions.';
  const validationResult = new FieldValidationResult();

  validationResult.succeeded = isValid;
  validationResult.errorMessage = isValid ? '' : errorMessage;
  validationResult.type = '';

  return validationResult;
}

const testFormValidationConstraints = {
  global: [questionsValidator]
};

const testFormValidation = createFormValidation(testFormValidationConstraints);

const viewModel = {
  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); // true
    console.log(validationResult.formGlobalErrors) // []
    console.log(validationResult.fieldErrors); //  {}
  })
  .catch((error) => {
    // handle unexpected errors
  });

Examples

React examples

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).

jQuery examples

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

Why another form library?

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).

License

MIT

About Basefactor + Lemoncode

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].