Before I start further let me tell you that currently this plugin only validates INPUT types with number, email and blank value fields. Its still in beta or under development mode.
GITHUB REPO : https://github.com/nirajmchauhan/jQuery-form-validation
I ll explain you the usage of this plugin by a simple form example
HTML:
[html]
<section>
<form method="post" class="form-horizontal" id="loginForm" onsubmit="return false;">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" name="user" placeholder="Email" class="required email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" name="password" class="required" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button id="submit" type="submit" class="btn" onclick="javascript:ajaxThrow('#loginForm','#response');">Sign in</button>
</div>
</div>
<div class="alert alert-info" id="response"></div>
</form>
</section>
[/html]
To make a field mandatory, you need to add a class
required.Currently on input types will be accepted so to make if mandatory, use the following attributes :
| class | Output |
|---|---|
class="required email" | This will check for blank field and whether the value is EMAIL ID |
class="required number" | This will check for blank field and whether the value is a NUMBER |
class="required" | This field will check for blank values |
So now the final is the jQuery:
JS:
[js]
jQuery(function($) {
$(document).ready(function() {
$('#submit').click(function() {
val = $('#loginForm :input').validateForm();
if (val) {
var qstring = $('#loginForm').serialize();
$('#response').fadeIn().html('Form Validated successfully with following fields<br>' + qstring);
}
});
});
});
[/js]
To validate the form, you ll just need to add a line :
val = $('#loginForm :input').validateForm();This will return a boolean value. And will also add a class error to the respective input field.
Check this in action here :
