Skip to main content

Getting Started

Install JustValidate using your favorite package manager:

npm install just-validate --save

Using code bundlers

Use it as an imported module

import JustValidate from 'just-validate';

const validate = new JustValidate('#form');

Without code bundlers

Include JustValidate script on your page from CDN and call it as window.JustValidate

<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<body>
<script>
const validate = new window.JustValidate('#form');
</script>
</body>

Quick start

Let's say we have a basic HTML layout:

<form id="basic_form">
<input id="basic_name" type="text" placeholder="Enter your name" />
<input id="basic_email" type="text" placeholder="Enter your email" />
<input id="basic_password" type="text" placeholder="Enter your password" />
<input id="basic_age" type="text" placeholder="Enter your age" />
<button type="submit">Submit</button>
</form>

Next, let's add JustValidate to our layout and define some simple rules.

First, we should create the instance new JustValidate('#form') by passing a form selector, or the element as an argument. Second, we call .addField() with a field selector as the first argument and an array of rules as the second argument.

The instance constructor takes 3 arguments:

new JustValidate(form, globalConfig, dictLocale);

where:

form - a string or DOM selector to the form element

globalConfig - settings, described here

const validator = new JustValidate('#basic_form');

validator
.addField('#basic_name', [
{
rule: 'required',
},
{
rule: 'minLength',
value: 3,
},
{
rule: 'maxLength',
value: 15,
},
])
.addField('#basic_email', [
{
rule: 'required',
},
{
rule: 'required',
},
{
rule: 'email',
},
])
.addField('#basic_password', [
{
rule: 'required',
},
{
rule: 'password',
},
])
.addField('#basic_age', [
{
rule: 'required',
},
{
rule: 'number',
},
{
rule: 'minNumber',
value: 18,
},
{
rule: 'maxNumber',
value: 150,
},
]);

It is possible to use DOM elements, instead of string selectors:

const validator = new JustValidate(document.querySelector('#basic_form'));

validator
.addField(document.querySelector('#basic_name'), [
{
rule: 'required',
},
{
rule: 'minLength',
value: 3,
},
{
rule: 'maxLength',
value: 15,
},
])
.addField(document.querySelector('#basic_email'), [
{
rule: 'required',
},
{
rule: 'email',
},
])
.addField(document.querySelector('#basic_password'), [
{
rule: 'required',
},
{
rule: 'password',
},
])
.addField(document.querySelector('#basic_age'), [
{
rule: 'required',
},
{
rule: 'number',
},
{
rule: 'minNumber',
value: 18,
},
{
rule: 'maxNumber',
value: 150,
},
]);

And that's it! Now our form is validated!

info

Please note that your form won't be submitted automatically (in case you want to define your own logic for sending the data to your backend using onSuccess callback). If you want to submit the form automatically please use submitFormAutomatically setting.

Demo

Advanced usage

Now we'll go through more comprehensive example. Let's say we have a bigger form:

<form id="advanced-usage_form" autocomplete="off" novalidate="novalidate">
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_password">Password</label>
<div class="input-wrapper">
<input
id="advanced-usage_password"
class="input"
autocomplete="off"
type="password"
placeholder="Enter password"
/>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_repeat-password"
>Repeat password</label
>
<div class="input-wrapper">
<input
id="advanced-usage_repeat-password"
class="input"
autocomplete="off"
type="password"
placeholder="Repeat password"
/>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_message">Message</label>
<div class="input-wrapper">
<textarea
id="advanced-usage_message"
class="input textarea"
placeholder="Enter message"
></textarea>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_favorite_animal_select"
>Select you favorite animal</label
>
<div class="input-wrapper">
<select class="select minimal" id="advanced-usage_favorite_animal_select">
<option value="">--Please select an option--</option>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Hamster">Hamster</option>
<option value="Parrot">Parrot</option>
<option value="Spider">Spider</option>
<option value="Goldfish">Goldfish</option>
</select>
</div>
</div>
<div class="control-wrapper mb-32">
<div class="label mb-8">You should give us your consent</div>
<div class="control-wrapper">
<div class="flex">
<input
type="checkbox"
id="advanced-usage_consent_checkbox"
class="checkbox"
/><label
class="input-label ml-8 pb-0"
for="advanced-usage_consent_checkbox"
>I agree to provide the information</label
>
</div>
<div id="advanced-usage_consent_checkbox-errors-container"></div>
</div>
</div>
<div
class="control-wrapper mb-32"
id="advanced-usage_communication_checkbox_group"
>
<div class="label mb-8">Please select at least 1 option</div>
<div class="control-wrapper">
<div class="flex">
<input
type="checkbox"
id="advanced-usage_communication_checkbox_group_1"
class="checkbox"
name="communication_checkbox_group"
/><label
class="input-label ml-8 pb-0"
for="advanced-usage_communication_checkbox_group_1"
>I'd like to receive news by email</label
>
</div>
<div
id="advanced-usage_communication_checkbox_group_1-errors-container"
></div>
</div>
<div class="control-wrapper">
<div class="flex">
<input
type="checkbox"
id="advanced-usage_communication_checkbox_group_2"
class="checkbox"
name="communication_checkbox_group"
/><label
class="input-label ml-8 pb-0"
for="advanced-usage_communication_checkbox_group_2"
>I'd like to receive news by post</label
>
</div>
<div
id="advanced-usage_communication_checkbox_group_2-errors-container"
></div>
</div>
<div class="control-wrapper">
<div class="flex">
<input
type="checkbox"
id="advanced-usage_communication_checkbox_group_3"
class="checkbox"
name="communication_checkbox_group"
/><label
class="input-label ml-8 pb-0"
for="advanced-usage_communication_checkbox_group_3"
>I'd like to receive news by text phone</label
>
</div>
<div
id="advanced-usage_communication_checkbox_group_3-errors-container"
></div>
</div>
</div>
<div class="control-wrapper mb-16">
<div class="label mb-8">
Please select the preferred way for communication
</div>
<div id="advanced-usage_communication_radio_group">
<div class="control-wrapper">
<label class="input-label flex"
><input
type="radio"
id="advanced-usage_communication_radio_group_1"
class="radio"
name="communication_radio_group"
/>
<span class="ml-8">Email</span></label
>
</div>
<div class="control-wrapper">
<label class="input-label flex"
><input
type="radio"
id="advanced-usage_communication_radio_group_2"
class="radio"
name="communication_radio_group"
/>
<span class="ml-8">Text message</span></label
>
</div>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_input_number"
>Input any number</label
>
<div class="input-wrapper">
<input
id="advanced-usage_input_number"
class="input"
autocomplete="off"
type="text"
placeholder="Input any number"
/>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_input_integer_number"
>Input an integer number</label
>
<div class="input-wrapper">
<input
id="advanced-usage_input_integer_number"
class="input"
autocomplete="off"
type="text"
placeholder="Input an integer number"
/>
</div>
</div>
<div class="control-wrapper">
<label class="input-label" for="advanced-usage_input_number_between"
>Input a number between 10 and 20</label
>
<div class="input-wrapper">
<input
id="advanced-usage_input_number_between"
class="input"
autocomplete="off"
type="text"
placeholder="Input a number between 10 and 20"
/>
</div>
</div>
<div class="control-wrapper">
<button type="submit" class="button">Submit</button>
</div>
</form>

For this form we will use the setup:

const validator = new JustValidate('#advanced-usage_form');

validator
.addField('#advanced-usage_password', [
{
rule: 'required',
},
])
.addField('#advanced-usage_repeat-password', [
{
rule: 'required',
},
{
validator: (value, fields) => {
if (
fields['#advanced-usage_password'] &&
fields['#advanced-usage_password'].elem
) {
const repeatPasswordValue =
fields['#advanced-usage_password'].elem.value;

return value === repeatPasswordValue;
}

return true;
},
errorMessage: 'Passwords should be the same',
},
])
.addField('#advanced-usage_message', [
{
validator: (value) => {
return value !== undefined && (value as string).length > 3;
},
errorMessage: 'Message should be more than 3 letters.',
},
])
.addField(
'#advanced-usage_consent_checkbox',
[
{
rule: 'required',
},
],
{
errorsContainer: '#advanced-usage_consent_checkbox-errors-container',
}
)
.addField('#advanced-usage_favorite_animal_select', [
{
rule: 'required',
},
])
.addRequiredGroup(
'#advanced-usage_communication_checkbox_group',
'You should select at least one communication channel'
)
.addRequiredGroup('#advanced-usage_communication_radio_group')
.addField('#advanced-usage_input_number', [
{
rule: 'required',
},
{
rule: 'number',
},
])
.addField('#advanced-usage_input_integer_number', [
{
rule: 'required',
},
{
rule: 'integer',
},
])
.addField('#advanced-usage_input_number_between', [
{
rule: 'required',
},
{
rule: 'minNumber',
value: 10,
},
{
rule: 'maxNumber',
value: 20,
},
]);

Demo

You should give us your consent
Please select at least 1 option
Please select the preferred way for communication

What's next?

To discover all features you could go through our tutorial, check all possible rules with demo and methods.

Don't forget to check out our handy examples.

And of course you could try our playground where you could discover features in real time!

Just let's validate!