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.jsis a JavaScript Library, based onjQuery.jsand HTML markup is based onbootstrap.css- Lightweight and every parameter is Configurable
- Can Inject Progressbar HTML markup
bootstrap.cssand Update it Automatically
How To Use
- Include
formlib.jsinto your webpage - Write HTML Markup (Bootstrap.css -
form-horizontalclass) for Your Form - Copy CSS Path to Form
- Create a New Object of
ProcessFormClass by passing CSS Path to Form - Define Configuration Object and call
configmethod forProcessFormObject successCallis 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.phpthat you can Download and test using PHP Server.
Download
formlib.js from github.comSample 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
