ttt-html-form-utils v1.0.0

ttt-html-form-utils

Js Library provides utilities that able parse and validate HTML Forms; Library offers using data-attrs which mark form elements;

Library provides:

- Form Parser
- Form Validator
- Validator
Give possibility to create your own validators;
- virtualFormFactory
Create object which contains virtualElements;

virtualElements^virt_elem;

Installation

npm i --save ttt-html-form-utils

HTML Meta information

Library uses data-attributes to detect which nodes are fields and type of field;

data-field-name - used to detect field name data-field-type - used to detect field's type

Available Types:

• text
• multipleSelect
• singleSelect

Look at example to get more details how it looks;

Getting Started

import {
    FormManipulator,
    FormValidator,
    VirtualFormFactory,
} from 'ttt-html-form-utils'

import {
    Validator,
  EmailValidator
} from 'ttt-html-form-utils/validators'

const $form = document.querySelector( 'form' ) // $ - means that variable contains DOM element

const virtualForm = VirtualFormFactory()
const formManipulator = new FormManipulator( virtualForm )
const formData = formManipulator.getForm()

const validationSchema = {
    email: {
        email: EmailValidator,
    },
    password: {
        minLength: ( val ) => val.length >= 6,
    }
}

const formValidator = new FormValidator( validationSchema )
console.log( formValidator.validate( formData ) )

What means $^dom_elem_designation in $form variable?

More Reality Example

Form utils:

VirtualFormFactory

createVirtualForm( $form )

Returns virtual form for formManipulator's constructor

FormManipulator

constructor( virtualForm )

clearForm()

Clears form's fields

getForm()

*Returns form data as an object in format <fieldName, fieldValue>*

Example:

const formData = formManipulator.getForm();
console.log(formData)

result:
{
    country: ['usa', 'russia'],
    rememberMe: true,
    email: 'my_new_email@gmail.com'
}

FormValidator

contructor( validations )

const validationSchema = {
    email: {
        email: EmailValidator
    },
    password: {
        minLength: (val) => val.length >= 6
    },

}

validate( data )

Struct of data you pass must repeat validation schema struct!

Return:

{
    value: 'value',
    error: false,
    validators: {
      mustBeTwo: {
        error: false
      }
    },
    messages: [],
}

Validators:

Built-in validators:

• email

Custom validators:

Use Validator class to create your own validators:

const { Validator } = require('ttt-html-form-utils/validators')

const getValidationFn = (minLength) => ( value ) => value.length >= minLength && (new RegExp(/[A-Z]/g)).test(value)
const minLength = 6
const getMessage = (minLength) => `minLength should be at least ${minLength}`

const passwordValidator = new Validator(getValidationFn, minLength, getMessage )

contructor

^virt_elem: That is special class which provides interface for easily control of form fields; ^dom_elem_designation: Variables, which have "$" at the start, contains DOM elements;