16

I want to use jQuery Validate plugin with JSF for client side form validation. I am finding basic difficulty in importing the resources.

In my JSF page I have

<h:outputScript library="js" name="jquery-1.6.2.js"></h:outputScript>
<h:outputScript library="js" name="jquery.validate.js"></h:outputScript>
<h:outputScript library="js" name="jquery.maskedinput.js"></h:outputScript>
<h:outputScript library="js" name="myapp.validate.js"></h:outputScript>

When I click on the script tab in the Firefox, I can't see any script files in the dropdown. There is a message shown:

If tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

Futher my jquery effect like mouse hover, hide, show etc do not work. I tried with usual script tags

<script type="text/javascript" src="../js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="../js/myapp.validate.js"></script>

Which was of no use. Still it was not able to locate my JS files. All my JS files are placed under 

   Web pages
       |_ js
           |_jquery-1.6.2.js,my.validate.js,jquery.validate.js,jquery.maskedinput.js

I tried one of the solutions posted at Using jQuery with JSF 2.0's resource but had no success.

Kindly suggest me a solution for this. I don't want to use JSF builtin validation with ajax, because we moved the code from JSP to JSF and the validation is already written. I want to reuse the existing jQuery Validation which I previously wrote.

Improve this question
0

1 Answer 1

Reset to default
33

The <h:outputScript> (and <h:outputStylesheet>) loads resources from /resources folder. You need to put the scripts in that folder.

WebContent
|-- resources
|    `-- js
|        |-- jquery-1.6.2.js
|        |-- myapp.validate.js
|        |-- jquery.validate.js
|        `-- jquery.maskedinput.js
|-- WEB-INF
:

Then the following script declarations should work:

<h:outputScript name="js/jquery-1.6.2.js" />
<h:outputScript name="js/jquery.validate.js" />
<h:outputScript name="js/jquery.maskedinput.js" />
<h:outputScript name="js/myapp.validate.js" />

(note that I omitted the library attribute, because the name "js" does not indicate a real library)

That your <script> approach failed is probably caused by using an incorrect relative path. You need to realize that resources are resolved relative to the current request URL and not to their path in the server side disk file system.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

@BalusC-So it automatically looks under resources folder?? If so does that mean I have to place my web content---css,images etc under resources only??? Is this a std folder structure set in netbeans??
That's what the documentation says, yes. No, this is completely unrelated to Netbeans. It's just a tool.
@BalusC You say that you omitted the library attribute because it does not indicate a real library. What do you mean exactly? What kind of names can be used? Doesn't the library correspond to the name of the folder under resources?
@user: The "resource library" should denote the common theme/skin/module where all of those resources belong to, which can even be embedded in a JAR file in /WEB-INF/lib. This also allows you for proper library version management. As to the name, just choose your own. JSF uses "javax.faces", PrimeFaces uses "primefaces", OmniFaces uses "omnifaces", etc. See also among others: stackoverflow.com/questions/9929417, stackoverflow.com/questions/10362942 and stackoverflow.com/questions/8320486
@BalusC Thanks but I don't get it. Under resources there should only be one folder (common, javax.faces, primefaces, omnifaces) and under that css, js etc? I currently have css and js under resources directly and I can use library="css" with outputStylesheet but library="js" does not seem to work with outputScript.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.