1.0.3 • Published 9 years ago
form-validator-jq v1.0.3
FormValidator (v1.0.2)
Plugin in jQuery to validate your forms using ajax or not. A validation differently!
Install (npm)
npm install form-validator-jq
Features
- Validation of any form;
- No need for CSS;
- Possible create confirmation message to submiter form (optional);
- Validates all kinds of inputs: input, select, checkbox, radio and textarea;
- Possible submit in AJAX or standard;
- Callbacks for AJAX method (success and error);
- Allows you to create your own validations (custom);
- Specific, personalized methods for success and validation error;
- Method to perform actions before and after for AJAX method;
- Avaiable in 3 languages: portguese(pt-bt), english(en), spanish(es);
Particularities
- Works with jQuery library;
- Compatible with any form;
- Because it is compatible with any form, errors are displayed in an "alert";
- Works with the ID attribute (ex.:
<form id="my-form"></form>
);
Options
Here's a list of available settings (default).
$("#my-form").formValidator({
before: function(){},
after: {
successValidation: function(){},
errorValidation: function(){}
},
submitEnable: true,
confirmSubmit : '',
myValidations: [],
sending: {
type: 'redirect',
dataType: 'html',
success: function(){},
error: function(){}
},
lang:'pt-br'
});
Attribute | Type | Default | Description |
---|---|---|---|
before | Function | null | Activities performed before validation (ex .: loading ...). |
after | Functions | null | Activities performed after validation (ex .: remove loading ...). |
submitEnable | Boolean | true | Enable or disable formValidator. |
confirmSubmit | String | empty | Message to ensure that the user really wants to submit. |
myValidations | Array | null | Lets you create multiple functions to perform special validation (returns a string). |
sending | Settings | ... | Settings to set the send mode (ex .: ajax). |
lang | String | pt-br | Language in which the plugin will work. |
Usage
Include in header your Html:
<script src="js/jquery.formValidator.js"></script>
Data Attributes | Description |
---|---|
data-required | With "true" or "" false "reports whether the input is required or not (ex .: <input name="name" data-required="true"/> ). |
data-title | Display name for the input, but can be replaced with a label containing the element name (ex .: <input name="name" data-required="true" data-title="Name" /> ). |
data-equals | When a field needs to be the same as another, much used in passwords (ex .: <input name="pass" data-required="true" data-title="Password" data-equals="repass" /> ). |
data-min-characters | Restrict the minimum amount of characters that the field has (ex .: <input name="pass" data-required="true" data-title="Password" data-min-characters="8" /> ). |
Examples
HTML 01 (Form login):
Form that exemplifies a login where all fields are required.
<form name="my-form" id="my-form" method="POST" action="send.php">
<div class="form-group">
<label>E-mail</label>
<input type="text" name="email" data-required="true" data-title="E-mail" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="pass" data-required="true" data-title="Password" />
</div>
<div class="form-group">
<button name="pass">Submit</button>
</div>
</form>
HTML 01 - JavaScript:
- Case 01:
Simplest way to call the plugin.
$(function(){
$('#my-form').formValidator();
});
- Case 02:
Thus it is determined consignment type "ajax", with callbacks methods "success" and "error".
$(function(){
$('#my-form').formValidator({
confirmSubmit: 'Are you sure to submit?',
sending: {
type: 'ajax',
success: function(data){
if(data==1){
alert("Submitted successfully!");
}
else{
alert("Failure to submit!");
}
},
error: function(){
alert("Failure to submit!");
}
}
});
});
HTML 02 (Form register):
Form that contains a special feature where passwords are required and should be equal.
<form name="my-form" id="my-form" method="POST" action="send.php">
<div class="form-group">
<label>E-mail</label>
<input type="text" name="email" data-required="true" data-title="E-mail" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="pass" data-required="true" data-equals="repass" data-title="Password" />
</div>
<div class="form-group">
<label>Re-Password</label>
<input type="password" name="repass" data-required="true" data-title="Re-Password" />
</div>
<div class="form-group">
<button name="pass">Submit</button>
</div>
</form>
HTML 02 - JavaScript:
- Case 01:
Simplest way to call the plugin.
$(function(){
$('#my-form').formValidator();
});