jQuery validation plugin is a lightweight, easy to use and powerful validation tool.
But when we want to use it with JSF, some special handling are required for it to work, due to the JSF component's clientId.
In this article, Primefaces 3.5 is used, and solution demonstrated below should be suitable for all other JSF implementations.
Steps:
1. Create the form and components that required validation.
2. If the target project is not JSF (strust, servlet, etc), the following syntax used.
because the component's clientId is generated by JSF, normally the clientId is in the following format - 'formId' + ':' + 'componentId'.
in this case, the clientId is going to be myform:emailAddr
By changing the clientId only is not enough, because the semicolon(:) in between the clientId may confuse jQuery.
Thus, we need to append single quote (') in front and behind of the clientId.
in this case, the clientId is going to be 'myform:emailAddr'
Done!!
But when we want to use it with JSF, some special handling are required for it to work, due to the JSF component's clientId.
In this article, Primefaces 3.5 is used, and solution demonstrated below should be suitable for all other JSF implementations.
Steps:
1. Create the form and components that required validation.
<h:form id="myform">
<p:inputText id="emailAddr" value="#{user.email}" />
</h:form>2. If the target project is not JSF (strust, servlet, etc), the following syntax used.
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
emailAddr: {
email: true
}
}
});
});
</script>because the component's clientId is generated by JSF, normally the clientId is in the following format - 'formId' + ':' + 'componentId'.
in this case, the clientId is going to be myform:emailAddr
By changing the clientId only is not enough, because the semicolon(:) in between the clientId may confuse jQuery.
Thus, we need to append single quote (') in front and behind of the clientId.
in this case, the clientId is going to be 'myform:emailAddr'
Solution:
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
'myform:emailAddr': {
email: true
}
}
});
});
</script>Complete source for jQuery validation plugin in JSF:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" />
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
'myform:emailAddr': {
email: true
}
}
});
});
</script>
</h:head>
<h:body>
<h:form id="myform">
<p:inputText id="emailAddr" value="#{user.email}" />
</h:form>
</h:body>
</html>
related jQuery validation articles:
- Email
- Credit card
- Multiple form fields
- Error message customization
- Multilingual error messages
- jQuery Validation Plugin localization
- Error handling in jQuery Validation Plugin
- Credit card
- Multiple form fields
- Error message customization
- Multilingual error messages
- jQuery Validation Plugin localization
- Error handling in jQuery Validation Plugin
Done!!
Great post kian! I am having trouble using the equalTo:
ReplyDeleteNo matter how I format the ID such as 'formID:inputID', "formID:inputID", 'formID\\:inputID' it doesn't work. It keeps telling me it has to match the previous data even though it is the same, my only guess is it can't find the input ID.
Any ideas?
Hi John,
DeleteAfter few attempts, I found this is working fine.
equalTo: $( "#myform\\:password1" )
Please let me know whether this is work for you too.
Thank you Kian! It works like a charm and you're a great help! :) Your site is a tremendous help btw, please keep it up!
DeleteGreat post! Two days looking for this solution and then I found your post! Thank you! Lol
ReplyDeleteHey Kian, Any ideas on how to implement validation if form is inside ui:repeat? JSF adds an extra numbered ID (ex, 0,1,2...etc...) So how would you target dynamically added forms? Ex: 'myform:0:emailAddr', 'myform:1:emailAddr
ReplyDeletea workaround came in my mind is to put the <script>...</script> into the ui:repeat
Deleteand append the form id with the ui:repeat index.
Do let me know the outcome as well.
Thanks
Thanks Alot for this post you just saved me :) also need little help on my jsf page has submit button and when i press this button still form is getting submitted without any validation i dont know why this is calling my java method. please help me on this.
ReplyDeleteThanks,
Vinod
Hi Vinod,
Deletecan you please post your button code in encoded format.
http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx