Basic Usage

Overview

This page provides an easy-to-follow guide on integrating and using the library in your project. The library simplifies the process of adding robust validation to your web forms with minimal setup.

In this example, we demonstrate:
1. Setting up a basic HTML form with input fields.
2. Linking the library using a CDN.
3. Initializing the validation function.
4. Adding a touch of CSS to style the form validation messages.

CDN

To integrate the Core JavaScript Form Validation Library into your project, simply include the following CDN link in your HTML file.
Add the script tag inside just before the closing <body> tag of your HTML file: 

<script src="https://cdn.jsdelivr.net/gh/chauhan07/jn-formvalidation/code/assets/js/jn.formvalidation.min.js"></script>

Setup

After linking the CDN, you need to initialize the form validation function to ensure that the form behaves as expected. 

const jn_validation = new JnFormValidation({
    showErrorMessages: true,
    formClass: '.jnForm',
});

HTML

Basic HTML structure of a form for use with the Form Validation Library. Each input field is enclosed in a <label> tag, providing a clean and accessible structure.
The form itself is assigned the class jnForm, and each <label> tag is given the class jn-input-wrap to ensure consistent styling and easy integration with the validation library. 

<form action="" class="jnForm">
    <label class="jn-input-wrap">
        <input type="text" name="" placeholder="Enter your name">
    </label>
    <label class="jn-input-wrap">
        <input type="email" name="" placeholder="Enter your email">
    </label>
    <label class="jn-input-wrap">
        <input type="tel" name="" placeholder="Enter your phone number">
    </label>
    <label class="jn-input-wrap">
        <textarea name="" placeholder="Enter you message"></textarea>
    </label>
    <label class="jn-input-wrap">
        <input type="submit" value="Submit">
    </label>
</form>

CSS

We provide a basic CSS structure for styling error messages. The error messages are displayed when a user submits a form with invalid or missing information. You can customize the CSS to match your theme and design preferences. 

/* Error Message Design */
.jn-error-wrap > .jn-error-message
{
    background: #c44106;
    color: #fff;
    font-size: 12px;
    padding: 4px 15px;
    border-radius: 0 0 5px 5px;
    width: 100%;
}

.jn-error-wrap input:not([type="radio"]):not([type="checkbox"]),
.jn-error-wrap select,
.jn-error-wrap .fileDesign,
.jn-error-wrap textarea 
{
    border: 1px solid #c44106!important;
}