val.js v0.0.3
val.js
Simple and customizable jQuery form validation plugin. Required jQuery.
Usage
$(".testForm").validator({
button: "#submit",
entries: [{
selector: "#name",
constraint: "name",
placeholder: "any placeholder text",
errorMessage: "invalid name",
hint: "this is a name"
}]
});
See demo.html
for more information.
Options
button
String, selector of the submit button.
eg. #submitButtonIdName
entries
Array of json objects. Each object represents an input field, containing following keys: id
, regex
, placeholder
, hint
and errorMessage
.
selector: String, selector of the input field.
constraint: String, defines the constraint of the input field. Four constraint types are offered as default (name
, phone
, country code
and email
). Regular Expression is also accepted. eg. /^[0-9]{0,4}$/
.
placeholder: please leave blank for now.
hint: String, hint text that displays when input is focused.
errorMessage: String, error message that displays when user input does not meet the constraints.
validHandler
(Optional) Function, defines what happens when a field is valid. It should take in following parameters: $entry: jQuery Object, the input field. eg. $(selector). validClass: String, CSS class name for valididated input field. invalidClass: String, CSS class name for invalid input field. errorMsgClass: (Optional), CSS class name for error message div container.
invalidHandler
(Optional) Function, defines what happens when a field is valid. It should take in following parameters: $entry: jQuery Object, the input field. eg. $(selector). validClass: String, CSS class name for validated input field. invalidClass: String, CSS class name for invalid input field. errorMsgClass: (Optional), CSS class name for error message div container. errorMsg: (Optional), String, content of the error message.
hintHandler
(Optional) Function, defines what happens when a field is valid. It should take in following parameters: $entry: jQuery Object, the input field. eg. $(selector). hintClass: String, CSS class name for hint container. errorMsgClass: CSS class name for error message div container. hint: String, content of the error hint. visible: Boolean, whether current handler showing/hiding the hint.
validClass
(Optional) String, CSS class name for validated input field. default: valid
.
invalidClass
(Optional) String, CSS class name for invalid input field. default: invalid
.
errorMsgClass
(Optional) String, CSS class name for error message container. default: invalid
.
hintClass
(Optional) String, CSS class name for hint inpu container. default: hint
.
errorMsg
(Optional) Boolean, display error message when user input does not meet the given contraint. default: true.
hint
(Optional) Boolean, display hint when user focus on an input field. default: true.
additionalRules
(Optional) Function, defines customized validation condition that must be satisfied before user can proceed on submitting the form. eg. a checkbox must be checked.
checkEvent
(Optional) String, defines when will validation check be triggered. default: 'input'.
Update
0.0.3
- include support for hint text
- able to specify when does validation check happen