jQuery User Validate Input (JUVI)
JUVI 2.x supports Real Time Validation!

PayPal

Donations to date: 0
Be the first to donate!

What is JUVI?

What is jQuery User Validate Input (JUVI)?

Code Documents

jQuery User Validate Input (JUVI) Documentation

Working Example

jQuery User Validate Input (JUVI) Example

Feedback

jQuery User Validate Input (JUVI) feedback
Latest Version: 2.1 jquery_user_validate_input_version1_1_changelog
jQuery Version: 1.7.2
Release Date: 2012-09-19

Archive


710 downloads and counting...

What is JUVI?

JUVI (jQuery User Validate Input) is a jQuery plugin, written for the purpose of easily, implementable user input validation code on Javascript level through the jQuery API

After struggling for a long time to get a jQuery user input validation plugin which is easy to implement, customizable and easy to control, we decided to write our own. It works so well, that it seemed to be a good idea to make it available to the world

As with any software, there is always room for improvement, thus we have made the Feedback section available for people to tell us what they think, and what can be improved. Based on this, we will release new versions and keep the old ones on archive

We hope that this plugin makes user input validation problems a thing of the past, and works so well that it becomes an asset to developers on the same level as jQuery itself
JUVI Documentation

JUVI is designed to be easily implementable, customizable, fast and user-friendly when validating user input

These are a few highlighted attributes

  • Validation is done realtime (with the option to be switched off) [ NEW ]
  • The input form error style is customizable by simply creating a css class and passing its name as a parameter to the plugin
  • The default error messages can be overridden to offer complete customization
  • A field which is not required is still validated when a user enters text into it "assuming that a _juvi_type is assigned to that field"
  • Almost all input validation has been catered for including
    • Mobile number validation
    • Email validation
    • Numeric validation
    • IPV4 validation
    • IPV6 validation
    • URI validation
    • Credit Card validation
    • Date validation
    • Boolean validation (checkboxes and radio buttons)
    • Min and Max values on fields
    • Custom "allows the developer to assign custom REGEX validation criteria to input fields"

Input field validation parameters


All _juvi... field properties are part of the validator plugin. This enables ease of readability and usage

Available parameters for use when assigning a form to JUVI for validation
Usage Example: $("#frm").validateForm({formSubmitTrigger: "send-enquiry"});
  • formSubmitTrigger - Specifies the id of the element which will cause form validation to trigger [ required ]
  • enableRealtimeChecking - Flag which switches realtime checking on/off (on by default) [ NEW ]
  • cssErrorClass - Customizes the css class to use to style JUVI error messages on validation. Default used by JUVI is juvi_error_div which looks like this
    .juvi_error_div {
    position: absolute;
    background-color: #FFF0F5;
    color: #000000;
    width: auto;
    height: auto;
    min-height: 20px;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #FF1493;
    /*Curve corners*/
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
  • requiredMessage - Overrides the default message to display if a field is required
  • errorMessageAlpha - Overrides the default message to display if an alpha type field's validation fails
  • errorMessageMobile - Overrides the default message to display if an mobile type field's validation fails
  • errorMessageEmail - Overrides the default message to display if an email type field's validation fails
  • errorMessageNumber - Overrides the default message to display if a number type field's validation fails
  • errorMessageIPV4 - Overrides the default message to display if a ipv4 type field's validation fails
  • errorMessageIPV6 - Overrides the default message to display if a ipv6 type field's validation fails
  • errorMessageURL - Overrides the default message to display if a url type field's validation fails
  • errorMessageCreditCard - Overrides the default message to display if a creditcard type field's validation fails
  • errorMessageDate - Overrides the default message to display if a date type field's validation fails
  • errorMessageBoolean - Overrides the default message to display if a boolean type field's validation fails
  • errorMessageCustom - Overrides the default message to display if a custom type field's validation fails
Available parameters for use in fields
  • _juvi_type - Defines the type of validator to link to a class. Possible options include:
    • alpha - Any character is valid "supports _juvi_min_length and _juvi_max_length"
    • mobile - Mobile numbers like 0821234567 "supports _juvi_min_length and _juvi_max_length, default length is 10"
    • email - Email addresses i.e. john@somewhere.com
    • number - Any numeric value i.e. 1221 "supports _juvi_min_length and _juvi_max_length"
    • ipv4 - Any valid IPV4 ip address i.e 192.168.1.23
    • ipv6 - Any valid IPV6 ip address
      • IPv6 address - 1050:0000:0000:0000:0005:0600:300c:326b
      • IPv6 address (short hand) - 1050:0:0:0:5:600:300c:326b
      • IPv6 address (colon) - ff06:0:0:0:0:0:0:c3
      • IPv6 address (colon short) - ff06::c3
      • IPV4 mapped IPV6 - 0:0:0:0:0:ffff:192.1.56.10
      • IPV4 compatible IPV6 - 0:0:0:0:0:0:192.1.56.10
      • // NOT SUPPORTED //
      • IPV4 mapped IPV6 (short hand) - ::ffff:192.1.56.10/96
      • IPV4 compatible IPV6 (short hand) - ::192.1.56.10/96
    • url - Any type of URL i.e. http://www.somewhere.com
    • creditcard - Any type of Credit Card number i.e. 4111111111111111
    • date - This validator type requires the _juvi_date_format to be set which will contain one of the following supported date formats:
      • yyyy-dd-mm
      • yyyy/dd/mm
      • dd-mm-yyyy
      • dd/mm/yyyy
      • yyyy/mm/dd
      • yyyy-mm-dd - /** The default if _juvi_date_format is not set **/
      • mm-dd-yyyy
      • mm/dd/yyyy
      •  
      • yy-dd-mm
      • yy/dd/mm
      • dd-mm-yy
      • dd/mm/yy
      • yy/mm/dd
      • yy-mm-dd
      • mm-dd-yy
      • mm/dd/yy
      •  
      • yyyy-d-m
      • yyyy/d/m
      • d-m-yyyy
      • d/m/yyyy
      • yyyy/m/d
      • yyyy-m-d
      • m-d-yyyy
      • m/d/yyyy
      •  
      • yy-d-m
      • yy/d/m
      • d-m-yy
      • d/m/yy
      • yy/m/d
      • yy-m-d
      • m-d-yy
      • m/d/yy
    • boolean - Checkboxes (usage example: terms & conditions) and radio buttons
    • custom - You can validate any type of REGEX pattern you like. This validator type requires the _juvi_pattern property to be set which will contain the regex pattern to validate against
  • _juvi_required - Specifies that a field is required
  • _juvi_min_length - The minimum length a field must be in order to be valid. Setting this to zero (0) will automatically exempt the field from being required, unless the _juvi_required property has been explicitly set
  • _juvi_max_length - The maximum length a field may be in order to be valid
  • _juvi_error_message - The default error message for a _juvi_type can be overridden per field by using this property
  • _juvi_pattern - Used ONLY with the custom _juvi_type. This property defines the Regular Expression against which a custom field will be validated
  • _juvi_date_format - Used ONLY with the date _juvi_type. This property defines the date format a field is required to be populated with (see above)

A simple validation example


<html>
<head>
<title>jQuery User Validate Input (JUVI) Example - 1.2</title>

<!-- Include the required jQuery version and the validator script -->
<script src="jquery_1.7.2_min.js" type="text/javascript"></script>
<script src="juvi_1.2_min.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
$(document).ready(function(){
//Attach form to validator within Try/Catch
try {
//Attach the form to an input validator
$("#frm").validateForm({formSubmitTrigger: "send-enquiry"});
} catch(e) {
alert(e);
}
//Check if the button is clicked to send an enquiry
$("#send-enquiry").click (function(event){
//Check if the form validated
if ($("#frm").validateForm("isValid")){
alert("Yay! The form is valid...");
}
});
});
//-->
</script>

</head>
<body>
<form name="frm" id="frm">
<h1>User input</h1>
<table cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<!-- Setting only a min length means that the maximum can be anything but at least min must be satisfied -->
<td><input placeholder="Joe Peterson" _juvi_type="alpha" _juvi_min_length="3" id="name" type="text" size="30" name="name"/></td>
</tr>
<tr>
<th>Email</th>
<!-- General email authentication with the _juvi_type="email" property -->
<td><input placeholder="joe@somewhere.com" _juvi_type="email" id="email" type="text" size="30" name="email"/></td>
</tr>
<tr>
<th>IP (V6)</th>
<!-- Quickly validate an IPV6 address -->
<td><input placeholder="1050:0:0:0:5:600:300c:326b" _juvi_type="ipv6" id="ip6" type="text" size="30" name="ip6"/></td>
</tr>
<tr>
<th>Do you accept the Terms & Conditions?</th>
<!-- Quickly validate checkbox -->
<td><input _juvi_type="boolean" _juvi_required="true" id="terms" type="checkbox" name="terms"/></td>
</tr>
<tr>
<td colspan="2" align="right">
<!-- Using a type button instead of submit gives much more flexibility and control. This is your trigger upon which to validate user input -->
<input class="button" type="button" id="send-enquiry" name="send" value="Send Enquiry"></input>
</td>
</tr>
</table>
</form>
</body>
</html>
JUVI Example

Name
Mobile
Email
Age
IP (V4)
IP (V6)
WEB Address
Credit Card
Date
Your favorite color
i.e. #EFEFEF
Terms & Conditions
Options Option 1 Option 2 Option 3
Message
0
JUVI Donators

No donators yet. Claim your space here by making a donation!