Community contributed extensions

Content:

  1. What's supported?
  2. About how the module works
  3. Edit Mode
  4. Auto Generated Confirm Elements
  5. Ajax Validations

What’s supported?

  1. It supports these annotations InFuture, Equals, InPast, Match, Max, MaxSize, Min, MinSize, Required , URL, Email, Range
  2. It supports JPA Models.
  3. It supports Siena Module & Models. (NEW)
  4. It Works fine on Google App Engine (or any server that doesn’t support writing to local file system Deploy To GAE ) (NEW)

About

This module interfaces client side validation (jquery library used: Jqvuery Validation Engine)

This module is aimed at simplifying things for developers to be more productive and for those who didn’t work with js before to do client side validation easily. It’s also intended to support a lot of validation needs and make it easier for developers to use validation. The module works as follows:

  1. There’s a startup plugin called StartUp and the method onApplicationStartup() is overriden. It searches the models directory and returns all the file names ending with .class.
  2. It filters these files to get only models annotated with Entity or siena.Table and the fields annotated with siena.Column. Then it loads the classes and retrieves all the fields.
  3. It checks for the validation annotations on the fields returned and map them to their corresponding validation strings ,that will be used in html, in a hashmap singleton in the MapSignleton.java.
    • The Map is paired this way Map<Model_Name<Field_Name,Validation>>. Then this map will be used in the attched fast tags to validate the inputs.

The supported annotations can be extended and more annotations can be added (I wish so). The validation library used is very flexible and can be extended easily. Also the module supports ajax validations per form or per field and custom functions. If anyone has anymore suggestions, ideas or whatever feel free to comment or suggest.

There’s a tag for every input under namespace jqv

Inspired from the already existing validation module there’s an attribute that is called for which will be in this form Model.field as if you are calling it.The for attribute’s required to validate the inputs, 'cause this is the only way to add valiadtions to the inputs so far(most of them). So I made it optional field.

You’re encouraged to Suggest more validations, enhancments or report bugs

Usage

There’re 2 javascript files jquery.validationEngine.js, jquery.validationEngine-en.js and 1 styleSheet file validationEngine.jquery.css in the public folder in the module. These are the validation engine i’m using so You’ll need to add them to the to the head tag in your html page.

And you add this script to activate the Validation Engine and attach it to the Forms:

<script> jQuery(document).ready(function(){
 // binds form submission and fields to the validation engine
 $.each(jQuery(".TBV"), function(){
	 $(this).validationEngine();
 });
 });</script>@

To add the needed scripts & stylesheets just call these tags:
* #{validation-css /} for the style sheets
* #{validation-scripts /} for the scripts needed.

Now We Start with The available tags. h5. There’re generic attributes for all the tags except for check boxes and radio buttons:

All the tags' names describe what they generate, but there’re some tags that have special attributes.
  1. #{jqv.vform } #{/} : It’s exactly the same as the regular Form Tag and it adds a class attribute to the form if not provided like class=‘TBV’ and if the class attribute is already given then it adds another class to it like class='{class provided by you} TBV'.
  2. #{jqv.date /} : It’ll output an html input of type text but validated with regex to be a date.
    • Optional type attribute sets one of the validations to this text field to match a date, datetime, or time formats . The default value will be date. The allowed types are: date, dateTime, time. the formats supported so far are , {HH:mm:ss} *24hrs mode*. and you can use *'-' or '/'* as separator for date.
    • ‘datepicker’ class will be added by default to the class attribute.
    • Adding datepicker is To Be Implemeneted.
  1. #{jqv.textarea } #{/}: It’ll output an html input in this format <textarea></textarea>. It has optional closing tag #{/} .
  2. #{jqv.file /} : It’ll output an html input in this format <input type="file" {class} {id} {name}/>
    • Optional min attribute sets the minimum size required for the path of the file.
    • Optional max attribute sets the maximum size allowed for the path of the file.
    • Optional accept attribute sets the allowed extensions for this file.
    • Optional reject attribute sets the forbidden extensions for this file.
  3. #{jqv.checkbox /} : It’ll output an html input in this format <input type="checkbox" {class} {id} {name}/> and group of checkboxes are defined by giving them the same name attribute.
    • Optional min attribute sets the minimum number of checkboxes required to be checked.
    • Optional max attribute sets the maximum number of checkboxes allowed to be checked.
    • Optional required attribute shows that this checkbox must be checked.
    • Optional group attribute sets the name of the group of checkboxes which one of them should be checked. (can be replaced by min:1).
  4. #{jqv.checkboxList /} : It outputs a list of check boxes in this form <label {class+Lbl}{for}>String</label><input type="checkbox" {class} {id} {name} {title} {value} />.
    • Required items attribute which is a list of type java.utils.List.
    • Required value attribute which is the name of certain field of objects in the items list. It sets the value attribute in the html element.
    • Required title attribute which is the name of certain field of objects in the items list. It sets the String in the label.
    • Optional class attribute sets the class attribute in the HTML element. If not provided then it’ll be assigned the title attribute.
    • Optional id attribute sets the id attribute in the HTML element. If not provided then it’ll be assigned the title attribute.
    • Optional name attribute sets the name attribute in the HTML element. If not provided then it’ll be assigned the title attribute.
    • Optional min attribute sets the minimum number of checkboxes required to be checked.
    • Optional max attribute sets the maximum number of checkboxes allowed to be checked.
    • Optional horizontal attribute sets the direction of repetition to be horizontal. If not provided then a vertical repetition is implied.
  5. #{jqv.radioList /} : It outputs a list of check boxes in this form <label {class+Lbl}{for} >String</label> <input type="radio" {class} {id} {name} {title} {value} />.
    • Required items attribute which is a list of type java.utils.List.
    • Required value attribute which is the name of certain field of objects in the items list. It sets the value attribute in the html element.
    • Required title attribute which is the name of certain field of objects in the items list. It sets the String in the label.
    • Optional class attribute sets the class attribute in the HTML elements. If not provided then it’ll be assigned the title attribute.
    • Optional id attribute sets the id attribute in the HTML elements. If not provided then it’ll be assigned the title attribute. And it will be appended with each element’s index starting from 0.
    • Optional name attribute sets the name attribute in the HTML element. If not provided then it’ll be assigned the class name of the items.
    • Optional required attribute shows that this radio buttons are requierd to choose from them(you write {required:' '} is enough).
    • Optional horizontal attribute sets the direction of repetition to be horizontal. If not provided then a vertical repetition is implied.

Edit Mode

What’s Edit Mode?

It’s a mode where you give the Validation form an object and then use the tags in the namespace jqv the edit mode makes use of the ‘for’ attribute in the tags to get the value of this field of this object and puts it as a default value for this input.

Usage

You give the #{jqv.vform /}{/} an attribute edit:the-object-to-be-edited. For example if there’s a user which is an object rendered from the controller and has the following attributes {name, email, pass} & values {“name-string”, “[email protected]”, “123456”}

the controller method

public static void editUser(long id){
	User user = User.findById(id);
	render(user);
}

the html tag

#{jqv.vform @Application.blala(), edit:user /}
#{jqv.text for:'User.name' /}
#{jqv.pass for:'User.pass' /}
#{jqv.email for:'User.email' /}
#{/}

The output will be (Without the dots)

bc. <input type=“text” ... id=“name” name=“name” value=“name-string” />
<input type=“password” ... id=“pass” name=“pass” value=“123456” />
<input type=“text” ... id=“email” name=“email” value=“[email protected]” />

and so on.

AutoGenerated Confirm Elements

About

Sometimes we need to confirm some inputs so instead of writing tags for the input itself and the repeating yourself to write the confirm too. The confirm input will be generated Automatically and will be placed where you specify. It’s Available only for #{jqv.date /} #{jqv.text /} #{jqv.pass /}

Usage

All what you need to do is to write your tag normally but with body. For example,

<tr>
	<td><label for="Useremail">Email</label></td>
	<td>#{jqv.text for:'User.email'}</td>
</tr>
	<tr><td>Confirm Email: </td> <td>%s</td></tr>
	#{/}

Instead of you can use whatever you want. The most important thing is that you need to put the %s where you want to place your confirm element.This should be written in the body of the tag you wnat to confirm it.*

The previous example will produce input html element with the same attributes and values for the email tag but the id will be changed to id="{the id specified in the tag}Confirm" and name="{the name specified in the tag}Confirm"

Any comments, suggestions, or contributions are welcome

Ajax Validation

about

The module now supports ajax validation for Form or Field. Here are the attributes you provide to use ajax validation.

For Field Ajax Validation

Validating Fields using ajax is easy and simple. First, all client side validations are processed (like required and so on). If there’s an error and the validation failed, then no need to continue to ajax validation! Otherwise (meaning the validations passed) then a validation request is sent to the server using ajax and response status will be cached. If the form is submitted then no ajax field validations will occur, it’ll just check the last cached result if it was true or false.

The protocol goes as follows.

  1. Client sends GET request with query string paramters url?{fieldId}={fieldValue} to the Server.
  2. Then Server responds with an array: [fieldid, status, errorMsg].
    • The status can be true or false to indicate if the validation passed or not.
    • The errorMsg that will be shown to the user. If the status is true then It’ll be shown in green prompt. If the status is false then it’ll be shown in red prompt.
    • the fieldid is id of html element was validated.

NOTE: The following attributes are valid for all text inputs (pass, date, textarea, text, and file)

For Form Ajax Validation

Validating Forms using ajax is now easy and simple. All what you need to do is to specify some attributes to enable the ajax validations, provide url, and even some callback functions. If you didn’t provide ajaxUrl then the action url of the form will be used for sending GET method to valiadte the form and POST for the actual submission. if the ajaxUrl is provided then this url will be used but with GET method to validate only.

The protocol goes as follows:

  1. Client sends GET request with query string paramters url?{fieldId1}={fieldValue1}&...etc to the Server.
  2. Then Server responds with an array of arrays: ].
    • For example ,["fieldId2", false, "there is an error "],["fieldId3", true, "this field is good"]]
Since the form validation is asynchronously delegated to the form action, we provide two callback methods:

onBeforeAjaxFormValidation(form, options) is called before the ajax form validation call, it may return false to stop the request

onAjaxFormComplete: function(form, status, json_response_from_server, options) is called after the ajax form validation call

Here are the attributes to be add these options to the form tag

The default behavior if this callback is not provided is to submit the form after it passes the validation.

Deploy To GAE

Google app Engine caused some problems when I tried to deploy the siena module because it doesn’t allow the web app to write to local file system. The module needs to update the validation rules file called “jquery.ValidationEngine-en.js”. So now I just check if the app iss allowed to write to the file system or not. You’ll just need to run the project at least once directly before Deploying so the module updates the validation rules file and it’ll be deployed updated.