1 2 Previous Next 18 Replies Latest reply: Sep 3, 2014 11:35 PM by Tom Petrus RSS

    Parsley and APEX

    sect55

      I just attended a jQuery course, and the instructor demonstrated using Parsley ("the ultimate JavaScript form validation library"). I would like to use it my APEX form. It says installation is as follows:

      <script src="jquery.js"></script>
      <script src="parsley.min.js"></script>

      <form id="form">
      ...
      </form>

      <script type="text/javascript">
        $('#form').parsley();
      </script         

        • 1. Re: Parsley and APEX
          fac586

          sect55 wrote:

           

          I just attended a jQuery course, and the instructor demonstrated using Parsley ("the ultimate JavaScript form validation library"). I would like to use it my APEX form. It says installation is as follows:

          <script src="jquery.js"></script>
          <script src="parsley.min.js"></script>

          <form id="form">
          ...
          </form>

          <script type="text/javascript">
            $('#form').parsley();
          </script         

          And?

          • 2. Re: Parsley and APEX
            AquaNX4

            If I understand you correctly:

             

            1. Go to the page where the form resides.
            2. Edit the region of the form.
            3. Place the following in the region header:

             

            <script src="jquery.js"></script>

            <script src="parsley.min.js"></script>

            <script type="text/javascript">
              $('#form').parsley();
            </script  

             

            That should work..


            Aqua


            • 3. Re: Parsley and APEX
              sect55

              Fac586,

               

              I saved the scripts in the static files and included the scripts in the HTML header:

              <script src="#WORKSPACE_IMAGES#parsley.min.js"></script>

              <script src="#WORKSPACE_IMAGES#validator.js"></script>

               

              I issued the following in the when page load:

              $(function() {

              $(form).attr(id,'form');

              $('#form').parsley();

              })

               

              This did not work.

               

              Robert

              • 4. Re: Parsley and APEX
                sect55

                Thanks for you reply, but...

                 

                The form has three regions so where should I place it.

                Also, jquery.js is already defined in APEX. Shouldn't be in the HTML header instead?

                 

                Robert

                • 5. Re: Parsley and APEX
                  fac586

                  sect55 wrote:

                   

                  I issued the following in the when page load:

                  $(function() {

                  $(form).attr(id,'form');

                  $('#form').parsley();

                  })

                  Why did you do this?

                   

                  APEX generates one form per page with an ID attribute value of wwvFlowForm:

                   

                  <form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm" novalidate >

                   

                  Have you tried using this existing ID in the selector?

                  This did not work.

                  "Did not work" how?

                  • 6. Re: Parsley and APEX
                    AquaNX4

                    Perhaps this will help:

                     

                    HTML Header

                    Use HTML Header to replace the #HEAD# substitution string in the page template header. The values entered here are inserted after the HTML <HEAD> tag. Common uses of these attributes:

                    • Code page-specific inline cascading style classes
                    • Add additional style sheets for a specific page
                    • Code page-specific JavaScript
                    • Code page-specific meta tag page refresh

                    For Include Standard CSS and JavaScript, select Yes to suppress the inclusion of cascading style sheet (CSS) and JavaScript files in the HTML Header. Because suppressing the display of these files breaks typical applications, enabling this attribute is only recommended for advanced developers.

                    HTML Body Attributes

                    Use this attribute to add events when the page is being loaded, such as calls to JavaScript. In the Page HTML Body attribute, enter JavaScript or text to be substituted for your page template's #ONLOAD# substitution string. To use this feature, your page template must include the #ONLOAD# substitution string.

                    You can use the Page HTML Body attribute to write into the contents of the opening <body> tag. A typical page template might use #ONLOAD# within the opening <body> tag as shown in the following example:

                    <html> <head> ... </head> <body #ONLOAD# >

                     

                     

                    Incorporating JavaScript into an Application

                    Adding JavaScript to a Web application is a great way to add features that mimic those found in client/server applications without sacrificing all the benefits of Web deployment. Oracle Application Express includes multiple built-in interfaces especially designed for adding JavaScript.

                    Remember that JavaScript is not appropriate for data intensive validations. For example, to verify that a name is contained within a large database table, you would need to pull down every record to the client, creating a huge HTML document. In general, complex operations are much better suited for server-side Application Express validations instead of JavaScript.

                    This section contains the following topics:

                    See Also:"Understanding Validations"

                    Referencing Items Using JavaScript

                    When you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle Application Express page in a Web browser, you would notice that all items have an id attribute. This id corresponds to the name of the item, not the item label. For example, if you create an item with the name P1_FIRST_NAME and a label of First Name, the ID will be P1_FIRST_NAME.

                    Knowing the item ID enables you to use the JavaScript method getElementById() to get and set item attributes and values. The following example demonstrates how to reference an item by ID and display its value in an alert box.

                    <script language="JavaScript1.1" type="text/javascript"> function firstName(){ alert('First Name is ' + document.getElementById('P1_FIRST_NAME').value ); } // or a more generic version would be function displayValue(id){ alert('The Value is ' + document.getElementById(id).value ); } </script> onchange="displayValue('P1_FIRST_NAME');" 
                    

                     

                    Incorporating JavaScript Functions

                    There are two primary places to include JavaScript functions:

                    • In the HTML Header attribute of the page
                    • In a .js file in the page template
                    See Also:"Text with JavaScript Escaped Single Quotes" for information about referencing a shortcut inside of a JavaScript literal string

                    Incorporating JavaScript into the HTML Header Attribute

                    One way to include JavaScript into your application is to add it to the HTML Header attribute of the page. This is a good approach for functions that are very specific to a page and a convenient way to test a function before you include it in the .js file.You can add JavaScript functions to a page by simply entering the code into the HTML Header attribute of the Page Attributes page. In the following example, adding the code would make the test function accessible from anywhere on the current page.To add JavaScript code in the HTML Header attribute:
                    1. On the Workspace home page, click the Application Builder icon.
                    2. Select an application.
                    3. Select a page.
                    4. Under Page, click the Edit page attributes icon.
                    5. Scroll down to HTML Header.
                    6. Enter code into HTML Header and click Apply Changes.

                    For example, adding the following would test a function accessible from anywhere on the current page.

                    <script type="text/javascript"> function test(){ window.alert('This is a test.'); } </script> 

                    See Also:

                    "HTML Header"

                    Including JavaScript in a .js File Referenced by the Page Template

                    In Oracle Application Express, you can reference a .js file in the page template. This approach makes all the JavaScript in that file accessible to the application. This is the most efficient approach since a .js file loads on the first page view of your application and is then cached by the browser.

                    The following demonstrates how to include a .js file in the header section of a page template. Note the line script src= that appears in bold.

                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>#TITLE#</title> #HEAD# <script src="http://myserver.myport/my_images/custom.js" type="text/javascript"></script> </head> <body #ONLOAD#>#FORM_OPEN#
                    // Then add the following to the "Form Element Attributes" Attribute of the item:
                    • 7. Re: Parsley and APEX
                      sect55

                      fac586,

                       

                      I did not see id for form aleady so put

                      $('#wwvFlowForm').parsley();

                      in the JavaScript > Execute when Page Loades section of th Page Attributes.

                       

                      I tried a max length validation for the registration number page item bu placing data-parsley-maxlength="10" in th HTML Form Element Attributes for the page item. But when I ran the form entering more than 10 characters for registration number, I received NO error messages when I clicked on the APPLY CHANGE button and received the normal ACTION PROCESSED message.

                       

                      Database : Oracle 10.2.0.5.0

                      APEX: APEX 4.1

                      • 8. Re: Parsley and APEX
                        Tom Petrus

                        What parsley version do you use? The stable and latest build (2.x) requires jquery version 1.8 or higher. Apex only ships with 1.7, so that might be an issue.

                         

                        Edit:

                         

                        I took some time to look into Parsley and played around with it. It's not that hard to get it up and running. However, there is just one tiny thing that requires extra work integrating it into apex.

                        If you want validation as you go, you may want to define Parsley triggers too, which eg fire on keyup or change.

                         

                        The issue why the validation is not firing when the page is submitted is because of how a handler is assigned to the submit event in Parsley.

                        This is the default function:

                          ParsleyForm.prototype = {
                            onSubmitValidate: function (event) {
                              this.validate(undefined, undefined, event);
                              // prevent form submission if validation fails
                              if (false === this.validationResult && event instanceof $.Event) {
                                event.stopImmediatePropagation();
                                event.preventDefault();
                              }
                              return this;
                            },
                        

                        And this is how it is bound:

                        formInstance.$element.on('submit.Parsley', false, $.proxy(formInstance.onSubmitValidate, formInstance));

                         

                        It doesn't work because of the element it is being bound on: it should be on the apex.gPageContext$ context. I wouldn't really change the parsley source since there is a workaround.

                        We can use the before page submit event for this. (You can use the submit event too, if you bind it correctly but ok)

                         

                        apex.gPageContext$.on("apexbeforepagesubmit", function(){ 
                          apex.event.gCancelFlag = !$("form[name=wwv_flow]").parsley().validate();
                        });
                        

                        Apex's bind to the before page submit with event.trigger, and event returns a boolean based on the cancel flag. Apex also uses this internally for its DA's. It's not that properly document, but it's obvious from the files. Try the above, should work nice, worked for me!

                        • 9. Re: Parsley and APEX
                          sect55

                          Tom,

                           

                          Thanks for your time and help.

                           

                          I included the code in the "when page is loaded" section of the page attributes.

                          apex.gPageContext$.on("apexbeforepagesubmit", function(){  

                            apex.event.gCancelFlag = !$("form[name=wwv_flow]").parsley().validate(); 

                          });

                          and still did not work.

                           

                          When I enter more than 10 characters in registration number, and click on Apply Changes, I still get "Action Processed"

                           

                          Robert

                          • 10. Re: Re: Parsley and APEX
                            Tom Petrus

                            Hi Robert,

                             

                            I'll just mention what I have in my tiny test:

                            Page:

                            Javascript URLs:

                            //code.jquery.com/jquery-1.11.0.min.js

                            #WORKSPACE_IMAGES#parsley.js

                             

                            -> jquery CDN, parsley version 2.0.3 (latest stable)

                             

                            Execute when page loads:

                            $("form[name=wwv_flow]").parsley();
                            apex.gPageContext$.on("apexbeforepagesubmit", function(){ 
                              apex.event.gCancelFlag = !$("form[name=wwv_flow]").parsley().validate();
                            });
                            

                            One call to instantiate parsley on load, and then the code to run on submit (especially for apex buttons which perform apex.submit() ). Mind that if you only add the apexbeforepagesubmit code then parsley will not be instantiated previously and only at that specific moment.

                             

                            Text item:

                            plain and simple text item, as a test.

                            Element - HTML Form Element Attributes:

                            data-parsley-maxlength="10" data-parsley-required="true"
                            

                            The default namespace is "data-parsley-" so do take care of that. Unless you set the namespace differently then any other attribute setting is never retrieved by parsley.

                             

                            That's it really. You can check my simple page on https://apex.oracle.com/pls/apex/f?p=11031:2

                            Login with apex_demo/demo

                            You can inspect the source for more, but there is not happening all that much.

                            • 11. Re: Parsley and APEX
                              sect55

                              Tom,

                               

                              Been busy on another part of the project as well as other projects, so this is the first time I was able to spend significant time on it.

                              Can you please give me access to the source. I must be missing something that I cannot pinpoint so it would be easier if you give me access to your simple application.

                               

                              Thank you,

                              Robert

                              • 12. Re: Parsley and APEX
                                Tom Petrus

                                Robert,

                                 

                                Added a download link on the demo page.

                                • 13. Re: Parsley and APEX
                                  sect55

                                  Tom,

                                   

                                  I downloaded your application and loaded in apex.oracle.com and it doesn't work. Ie., no error message when I put in over 10 characters.

                                   

                                  https://apex.oracle.com/pls/apex/f?p=19110:LOGIN_DESKTOP

                                   

                                  Please use apex_demo/apex and test it.

                                   

                                  Thank you,

                                   

                                  Robert

                                  • 14. Re: Parsley and APEX
                                    Tom Petrus

                                    Ah, I forgot the app export would not take the associated static files with it. I see you've added a parsley.js file yourself, but it's a wrong one (the page also has a js error originating in the file). Add the parsley.js file from here Parsley - Download the pieces

                                    1 2 Previous Next