Adds form validation controls

[Marcisbee]

Added

• Form validation controls
• Simple chain able validator

Usage

• Input, textarea and select tags has custom attribute validate that will watch changes for this field.
• Form tag has onvalidate attribute, that is function, that returns object of fields by name attribute and checks is it valid => true or is it invalid => "String error message".
• Form has one more additional attribute error that identifies by string to where validation errors should be sent.
• New tag errors that renders errors pushed by forms validation.
• Submit button has additional attribute too validate-submit. It checks if submit button should be available or not => disabled.

import { Validator } from 'radi';

<form
  action="#"
  prevent
  onsubmit={ (e, values) => (this.sendMessage(e, values)) }
  onvalidate={ e => ({
    email: value => new Validator(value)
      .required().error('E-mail is required')
      .email().error('E-mail is invalid')
      .check(),
  }) }
  error="contact-form">

  <errors
    name="contact-form"
    onrender={errors => (
      <ul class={['alert', 'alert-error']}>
        {errors.map( error => (
          <li>{ error.reason }</li>
        ))}
      </ul>
    )}
  />

  <input
    loadfocus
    placeholder="E-mail"
    name="email"
    type="email"
    validate/>

  <button
    type="submit"
    disabled
    validate-submit>
    Send message
  </button>

</form>

Usage of Validator

This radi version introduces new class Validator. It takes in value, chains validations/error messages.

At the end call .check() to validate this chain and it returns true or "Error message".

After every validation rule we can call .error(String). It will serve as error message if validation rule before this fails.

Default validation rules

• required()
• min(Number)
• max(Number)
• email()

new Validator("name@name")
   .required().error('E-mail is required')
   .email().error('E-mail is invalid')
   .check()

This will return "E-mail is invalid"