cleverform.js

CleverForm is a JavaScript library for fast, straightforward and elegant💕 HTML form validations

📜 Visit cleverform.org for official documentation.

Introduction

Cleverform is a javascript library for elegant💕 and easy to use form validation.

It's a 1 stop shop javascript library that handles all forms related functionality such as field validations, displaying of field errors in the DOM, Field CSS class Injections depending on the field status (success/with error), serializing validated field data, and many more!

Why cleverform?

“ We all find the good parts in the products that we use.We value simplicity, and when simplicity isn’t offered to us, we make it ourselves. ”

Javascript alone has no built-in form validation functionalities.

Implementing your form validation from scratch is very cumbersome and it consumes a lot of time in your development.

That's why CleverForm library exists!

In just a few minutes, you can implement form validations.

✅ Easy to understand

JavaScript beginners can easily understand the library API.

✅ Zero JS dependencies

No need to add other javascript libraries.

✅ CSS library adaptable

Can work with different CSS libraries such as bootstrap , Foundation , Bulma and many more.

✅ Short code

Form validation in just a few lines of codes.

✅ Built-in validation rules

CleverForm has many built-in validation rules that you can use like required, minLen, and many more!

✅ Custom validation rules

If there are no built-in rules that will suffice your need, you can add your own validation rules with your logic in easy to understand syntax.

✅ Form security

The cleverform handle form securities such as not allowing form users to forcibly submit a form via the browser’s console :

//Example of forcing to submit first form in the DOM and it ignore any kind of form validations 
document.forms[0].submit()

But by using CleverForm, this vulnerability is solved.

Sample Usage

For more details about installations and implementation, visit cleverform.org for official documentation.

👉 Create your form

Below is the html code for the form where we will add form validation using Cleverform.

<form method="POST" id="registrationForm" >

    <div class="row">
        <label for="f_name">First name</label>
        <div >
            <input type="text" class="field" id="f_name" name="f_name">
            <!-- The div tag below will hold the error message of the field. -->
            <div cf-msg="f_name"></div>
        </div>
    </div>

    <!-- Last name and Other fields here ... -->
    <!-- Submit button here... -->

</form>


<!-- Import cleverform -->
<script src="/your-path/cleverform.dev.js" ></script>

👉 Instantiate your form

Below is a simple way of implementing form validation using CleverForm constructor function. CleverForm does every field's validation under the hood.

const regForm = new CleverForm({

    // The id of the html form
    id: "registrationForm",

    // The validation rules per field's name, multiple rules are seperated by pipe '|'
    rules: {
        f_name: "required | minLen:2 | maxLen:50",
        l_name: "required | betweenLen:2,50",
        //...
    },

    formEvents: {

        // onSuccess event  hold a callback function/event listener
        // that will run when the form is submitted with out validation errors
        
        onSuccess: function(validatedData) {

            //submit validatedData here via http request in the server
            console.log("Success, Form has No validation error. Submit data via http request in the server (ex: via AJAX , fetch and axios)");
            console.log("validatedData Object: ", validatedData);

        },

        // other events here...
    }

    // ...
});

That's it! 🎉

You just implemented a form validation. 👏

👉 Accessing value

Optionally, you can easily access the field's current value in the form at runtime by accessing the instance's properties.

// continuation of `regForm` instantiation above...

var firstName = regForm.f_name;
var lastName = regForm.l_name;

console.log(firstName) // prints the f_name value
console.log(lastName)  // prints the l_name value

License

MIT

Copyright (c) 2020 JC II