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
  Most common email patterns supported [ SOURCE: http://en.wikipedia.org/wiki/Email_address ]
  • niceandsimple@example.com
  • very.common@example.com
  • a.little.lengthy.but.fine@dept.example.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>


</html>