another-simple-validator v0.2.3
another-simple-validator
Simple JS form validator is style-agnostic form field validator. Styling of inputs responding to their validity state is up to you, library provides only js logic for validation.
By default it will add .dirty
class to inputs which were manipulated by user, and .error
class to mark invalid ones, but you can change these classes in library config.
Demo
- Clone repository
- Run
npm install
- Run
npm run dev
You should see test form, which you can modify to your needs to test validator.
Basics
Installation
With npm
Run npm i another-simple-validator
.
import SimpleVal from 'another-simple-validator';
const form = new SimpleVal({});
Classic js
- Download
simpleval.dist.js
fromdist
directory and copy it into your project directory - Include it in html:
<script src="./simpleval.dist.js"></script>
- Create form object with
SimpleVal
constructor
const form = new SimpleVal({
...formOptions
});
Supported field types
- inputs: text, email, password
- select-one
- textarea
- radio
- checkbox
Available validators
{
minLength: 6,
maxLength: 10,
numericality: true,
regex: /^[^\D]\d{0,9}((\.|,)\d{1,})?$/
}
Configuration
First we create form fields with unique name
and id
attributes for each field (except for radio buttons where we use one name for whole group of buttons).
<select id="form__subject" name="subject">
<option disabled selected value>Select subject</option>
<option value="subject-1">Subject #1</option>
<option value="subject-2">Subject #2</option>
</select>
<input type="text" id="form__name" name="name" />
<input type="email" id="form__email" name="email" />
<input type="radio" id="radio1" name="radiogroup" value="radio1" />
<label for="radio1">Radio #1</label>
<input type="radio" id="radio2" name="radiogroup" value="radio2" />
<label for="radio2">Radio #2</label>
We also have to add a button that will handle form submision. By default I have added .disabled
class to the btn, which will be toggled during validations.
<button type="submit" class="form__btn disabled">Submit</button>
Next, we setup our form by passing options object to new Form constructor.
import Form from './scripts/simpleval.dist.js';
const formConfig = {
fields: [
{
selector: '#form__subject',
options: {
required: true
}
},
{
selector: '#form__name'
},
{
selector: '#form__email',
options: {
required: true
}
},
{
selector: 'radiogroup',
options: {
type: 'radio',
required: true
}
}
],
submitBtn: {
selector: '.form__btn',
onSubmit: sendForm,
disabledClass: '.disabled'
}
}
const form = new Form(formConfig);
And that's basically all, we should have our form validations up and ready.
Form configuration object
Here you can see form config object with all currently available options and their default values:
const formConfig = {
fields: [
{
selector: '#fieldId', // any selector that can be used with document.querySelector function in JS
options: {
validators = {},
required = false,
touched = false, // we can pass 'touched' state on form creation if for example we prepopulate form with value
ignoreDefaults = false, // this will ignore default validators, currently applied only to email inputs
validateAutomatically = true // we can turn off automatic validation if we want to validate only by force
}
},
{
// radio buttons and checkboxes do not accept any validators except for 'required' option
selector: 'radiogroup',
options: {
type: 'radio', // for radio buttons it is required to pass 'type' option
required: true
}
}
],
submitBtn: {
selector: '.btnClass',
onSubmit: (values) => console.log('Callback function called on successfull form submit. Returns object will {field: value} pairs'),
disabledClass: '.disabled' // class to add when button should be disabled (form invalid)
},
errorClass: '.err', // class to add on error
dirtyClass: '.drr' // class to add to touched inputs
}