JSP Live Validation
Its being interesting to have the validation of web application with each tab movement which also called Live Validation. The concept natively came with Ruby on Rails frame work. I felt to do the same for a JSP page.
What we need?
1. Download livevalidation_standalone.js file from bellow location
http://www.livevalidation.com/javascripts/src/1.3/livevalidation_standalone.js
2. Download consolidated_common.css file from bellow location
http://docman.cn/docs/livevalidation/css/consolidated_common.css
3. keep both the file in the context of your web application
4. And link both .js and css file to the Jsp page with in tag
<head>
<link rel="stylesheet" type="text/css" href="css/consolidated_common.css">
<script type="text/javascript" src="jscript/livevalidation_standalone.js"></script>
</head>
then beside the text box have the given code as given bellow.
Required Validation:
<tr>
<td width="462"><span class="style5">Required Validation:</span></td>
<script type="text/javascript">
var sayHello = new LiveValidation('sayHello', { validMessage: 'Thanks!', wait: 500});
</script> </td>
</tr>
same way follow other code for several validation
Numeric Only :
var f3 = new LiveValidation('f3');
f3.add(Validate.Numericality);
Integer Only:
var f4 = new LiveValidation('f4');
f4.add(Validate.Numericality, { onlyInteger: true } );
Specific 2000 Only:
var f5 = new LiveValidation('f5');
f5.add(Validate.Numericality, { is: 2000 } );
Higher than or equal to 2000:
var f6 = new LiveValidation('f6');
f6.add(Validate.Numericality, { minimum: 2000 } );
Lower than or equal to 2000:
var f7 = new LiveValidation('f7');
f7.add(Validate.Numericality, { maximum: 2000 } );
Within a range of 2000 - 3000:
var f8 = new LiveValidation('f8');
f8.add(Validate.Numericality, { minimum: 2000, maximum: 3000 } );
Should be between 2000 and 2003, and also be an integer:
var f9 = new LiveValidation('f9');
f9.add(Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );
Should be 4 or more characters in length:
var f11 = new LiveValidation('f11');
f11.add(Validate.Length, { minimum: 4 } );
Confirm password:
var f19 = new LiveValidation('f19');
f19.add(Validate.Confirmation, { match: 'myPasswordField'} );
Should be an email address:
var f20 = new LiveValidation('f20');
f20.add(Validate.Presence);
f20.add(Validate.Email );
output of the page look like with each event like this
- Labels: JSP, JSP Live Validation
- (0) Comments
Posts
0 comments:
Post a Comment