Uploaded image for project: 'Click'
  1. Click
  2. CLK-735

TabbedForm does not work with JavaScript validation

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.3.0-M1
    • Fix Version/s: 2.3.0-RC1
    • Component/s: extras
    • Labels:
      None

      Description

      Reported by Tomasz Bandura on the mailing list:

      http://click.markmail.org/thread/5gimf2vn2y5yozzy

      The TabbedForm.htm should check if $form.isJavaScriptValidation is on and render the html markup:

      <tr style="display:none" id="$form.getId()-errorsTr">
      <td width='100%' align="$form.getErrorsAlign()">
      <div class="errors" id="$form.getId()-errorsDiv"></div>
      </td>
      </tr>

      1. control_js.patch
        2 kB
        Tomasz Bandura
      2. TabbedForm_htm.patch
        3 kB
        Tomasz Bandura
      3. TabbedForm_java.patch
        16 kB
        Tomasz Bandura
      4. tabbed-form-demo_htm.patch
        0.3 kB
        Tomasz Bandura
      5. TabbedFormDemo_java.patch
        14 kB
        Tomasz Bandura

        Activity

        Hide
        tomeq Tomasz Bandura added a comment -

        Hi,

        Please also add 'onShowTab()' method for each error (e.g. <a class="error" href="#" onclick="onShowTab(2);setFocus('form_city');"> You must enter a value for City </a>)

        regards

        Tomasz

        Show
        tomeq Tomasz Bandura added a comment - Hi, Please also add 'onShowTab()' method for each error (e.g. <a class="error" href="#" onclick="onShowTab(2);setFocus('form_city');"> You must enter a value for City </a>) regards Tomasz
        Hide
        sabob Bob Schellink added a comment -

        Adding onShowTab is tricky as validation is done on client side. Essentially we need a new validateForm JS method geared for tabs. When a field is validated it needs to determine on which tab it is on. Anyone interested in implementing this or submitting a patch?

        Show
        sabob Bob Schellink added a comment - Adding onShowTab is tricky as validation is done on client side. Essentially we need a new validateForm JS method geared for tabs. When a field is validated it needs to determine on which tab it is on. Anyone interested in implementing this or submitting a patch?
        Hide
        tomeq Tomasz Bandura added a comment -

        Please find attached patches proposal.

        Show
        tomeq Tomasz Bandura added a comment - Please find attached patches proposal.
        Hide
        tomeq Tomasz Bandura added a comment -

        Patches for javascript,java and html (javascript validation bug in tabbed form)

        Show
        tomeq Tomasz Bandura added a comment - Patches for javascript,java and html (javascript validation bug in tabbed form)
        Hide
        tomeq Tomasz Bandura added a comment -

        Patch for tabbed form example: add Javascript option for form validation.

        Show
        tomeq Tomasz Bandura added a comment - Patch for tabbed form example: add Javascript option for form validation.
        Hide
        sabob Bob Schellink added a comment -

        Nice patches Tomasz, very nice. I'll start integrating them soon. The #macro is a good idea to cleanup some of the repetitive markup in TabbedForm.htm.

        Couple of nights ago I worked on a JS version for finding the parent sheet. I'll paste it below for reference. Looking at your patch we could change it slightly to use the following function to lookup the tab instead of passing the field names array:

        onShowTab(Click.getTabSheetNumber(' + fieldId + '))

        Click.getTabSheetNumber=function(id) {
        var node=document.getElementById(id);
        if(!node) return 1;
        var parent = node.parentNode;
        while(parent && !Click.isTabSheet(parent))

        { parent = parent.parentNode; }

        if (parent) return parent.getAttribute("id").substr(10);
        return 1;
        }

        Click.isTabSheet=function(node) {
        if(!node) return false;
        var id=node.getAttribute('id');
        if(id)

        { if(id.indexOf('tab-sheet-')>=0) return true; }

        return false;
        }

        Anyway, something to ponder a bit.

        Kind regards

        Bob

        Show
        sabob Bob Schellink added a comment - Nice patches Tomasz, very nice. I'll start integrating them soon. The #macro is a good idea to cleanup some of the repetitive markup in TabbedForm.htm. Couple of nights ago I worked on a JS version for finding the parent sheet. I'll paste it below for reference. Looking at your patch we could change it slightly to use the following function to lookup the tab instead of passing the field names array: onShowTab(Click.getTabSheetNumber(' + fieldId + ')) Click.getTabSheetNumber=function(id) { var node=document.getElementById(id); if(!node) return 1; var parent = node.parentNode; while(parent && !Click.isTabSheet(parent)) { parent = parent.parentNode; } if (parent) return parent.getAttribute("id").substr(10); return 1; } Click.isTabSheet=function(node) { if(!node) return false; var id=node.getAttribute('id'); if(id) { if(id.indexOf('tab-sheet-')>=0) return true; } return false; } Anyway, something to ponder a bit. Kind regards Bob
        Hide
        tomeq Tomasz Bandura added a comment -

        Do you plan to commit this, or should i add it in my patch?

        Show
        tomeq Tomasz Bandura added a comment - Do you plan to commit this, or should i add it in my patch?
        Hide
        sabob Bob Schellink added a comment -

        No need for another patch, I'll merge it in.

        Kind regards

        Bob

        Show
        sabob Bob Schellink added a comment - No need for another patch, I'll merge it in. Kind regards Bob
        Hide
        sabob Bob Schellink added a comment -

        fixed

        Show
        sabob Bob Schellink added a comment - fixed

          People

          • Assignee:
            sabob Bob Schellink
            Reporter:
            sabob Bob Schellink
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development