Process HTML Form data, Validate it and Submit to the Server Using formlib.js - jQuery

formlib.js

---

My new JavaScript Library based on jQuery to Process, Validate and Submit HTML Forms






What if i tell you that, this can do the job of HTML Form Processing ( It can Validate input fields data as well as can Submit Form data to Server, When You submit the Form)

Why formlib.js

• formlib.js is a JavaScript Library, based on jQuery.js and HTML markup is based on bootstrap.css
• Lightweight and every parameter is Configurable
• Can Inject Progressbar HTML markup bootstrap.css and Update it Automatically

How To Use

• Include formlib.js into your webpage
• Write HTML Markup (Bootstrap.css - form-horizontal class) for Your Form
• Copy CSS Path to Form
• Create a New Object of ProcessForm Class by passing CSS Path to Form
• Define Configuration Object and call config method for ProcessForm Object
• successCall is Important, actually this is a Function, that should be called when Form Successfully Processed and Submitted to the Server (Backend)
• There is a Demo HTML file index.php that you can Download and test using PHP Server.

Download

formlib.js from github.com

Sample JavaScript Code

var i = new ProcessForm("#simpleform");
var j = {
    /* I do not want tooltips */
    "injectTooltip": false,
    /* I do not want to show BS Icons for OK and Cancel */
    "injectBSIcon": false,
    "successCall" : function(i){ console.log(i); },
    "errorCall": function(i){ console.log(i); },
    'progressbar': "#progressbar",
    'validator': {
        'name': {
            "func": 'isUserName',
            "msg": "Please, Enter a Valid User Name"
        },
        "email": {
            "func": "isValidEmail",
            "msg": "Please, Enter a Valid Email Address"
        }
    }
};
i.config(j);

Sample Bootstrap based HTML Form Code

<form action="/demo.php" class="form-horizontal0 " id="simpleform" method="POST" style="border:2px solid rgba(228, 45, 172, 0.6);">
<fieldset>
    <legend>Simple HTML Form</legend>
    <div class="form-group">
        <label for="name" class="control-label col-xs-1">Name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="first" class="control-label col-xs-1">First's</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="first">
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="form-group">
        <label for="last" class="control-label col-xs-1">Last's</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="last">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="control-label col-xs-1">Email</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="email">
        </div>          
    </div>
    <div class="clearfix"></div>
    <div class="form-group">
        <label for="file1" class="control-label col-xs-1">File1</label>
        <div class="col-xs-9">
            <input type="file" class="form-control" name="file1">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12" id="progressbar"></div>
    </div>
    <div class="form-group" style="max-width: 200px;margin: 5px auto;">
        <input id="simpleformsubmit" class="btn btn-primary btn-block" type="submit" name="Click" value="Submit">
    </div>
</fieldset>
</form> 

---

Formlib.js - By Shishtpal Singh