jQuery UI Widgets Forums General Discussions Problem changing themes

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 8 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Problem changing themes #75072

    Craig Matthews
    Participant

    Greetings.

    I was attempting to use jqxValidator, but some of my validations are going to be rather complex.

    As you can see in the example, VendorNum and PONumber are intertwined, and AccountNumber also needs to be in the mix at some point.

    I am attempting to use the theme settings as an error indicator, with energyblue as valid and orange as invalid.

    If you enter 013600 in VendorNum and PYROLL in PONumber, PONumber correctly indicates “Invalid PO Number!”, but it is only invalid in concert with a VendorNum not equal to 999999, so the theme on VendorNum is changed to orange. Once it is set to orange, it will not reset to energyblue.

    I even added two buttons to force change the theme, and once it is changed from energyblue to orange, it will not change back to energyblue.

    I thought that the theme could be changed at any point.

    Is this an expected behavior, or have I run into a bug?

    If it is the expected behavior, how does one go about indicating multiple error conditions with jqxValidator against multiple input fields?

    Thank you.

    <!DOCTYPE html>
    
    <script language="JavaScript" type="text/javascript" src="..\..\static\js\jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="..\..\static\js\jqwidgets\jqxcore.js"></script>
    <script language="JavaScript" type="text/javascript" src="..\..\static\js\jqwidgets\jqxbuttons.js"></script>
    <script language="javascript" type="text/javascript" src="..\..\static\js\jqwidgets\jqxinput.js"></script>
    <script language="javascript" type="text/javascript" src="..\..\static\js\jqwidgets\jqxvalidator.js"></script>
    <link rel="stylesheet" type="text/css" href="..\..\static\js\jqwidgets\styles\jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="..\..\static\js\jqwidgets\styles\jqx.energyblue.css" />
    <link rel="stylesheet" type="text/css" href="..\..\static\js\jqwidgets\styles\jqx.orange.css" />
    
    <form id="testForm" action="./">
        <table class="register-table">
            <tr>
                <td>Username:</td>
                <td>
                    <input type="text" id="userInput" class="text-input" />
                </td>
            </tr>
            <tr>
                <td>E-mail:</td>
                <td>
                    <input type="text" id="emailInput" class="text-input" />
                </td>
            </tr>
            <tr>
                <td>VendorNum:</td>
                <td><input id="VendorNum" maxlength="6"/></td>
            </tr>
            <tr>
                <td>PONumber: 16</td>
                <td><input id="PONumber" maxlength="6"/></td>
            </tr>
            <tr>
                <td>AccountNumber:</td>
                <td><input id="AccountNumber" maxlength="18"/></td>
            </tr>
        </table>
    </form>
    
    <input type="button" style="margin:30px;" id="jqxbutton" value="Submit" />
    <input type="button" style="margin:30px;" id="ChangeToBlue" value="Change VendorNum To Blue" />
    <input type="button" style="margin:30px;" id="ChangeToOrange" value="Change VendorNum To Orange" />
    
    <script language="JavaScript">
    $(document).ready(function() {
      $('#VendorNum').jqxInput({ theme: 'energyblue', width: 100, height: 25 });
      $('#PONumber').jqxInput({ theme: 'energyblue', width: 100, height: 25 });
      $('#AccountNumber').jqxInput({ theme: 'energyblue', width: 100, height: 25 });
      $("#jqxbutton").jqxButton({ theme: 'energyblue', width: 100, height: 30 });
      $('#ChangeToBlue').jqxButton({ theme: 'energyblue', width: 250, height: 30 });
      $('#ChangeToOrange').jqxButton({ theme: 'energyblue', width: 250, height: 30 });
      $('#testForm').jqxValidator({
         rules: [
           {
               input: '#userInput',
               message: 'Username is required!',
               action: 'blur',
               rule: 'required'
      
           },
           {
               input: '#emailInput',
               message: 'Invalid e-mail!',
               action: 'blur',
               rule: 'email'
           },
           {
               input: '#VendorNum',
               message: 'Invalid Vendor Number!',
               action: 'blur',
               rule: function () {
                       var v = $('#VendorNum').jqxInput('val'),
                           p = $('#PONumber').jqxInput('val'),
                           themeSettingForValid = { theme: 'energyblue' },
                           themeSettingForInvalid = { theme: 'orange' },
                           result = false;
                       console.log('v.length = ' + v.length + ', v = "' + v + '", p.length = ' + p.length + ', p = "' + p + '"');
                       if (v.length == 6) {
                          if (p.length == 6) {
                             if (v == '999999' && p != 'PYROLL' && p.substr(0, 4) != 'PYRL') {
                                return false;
                             }
                          }
                       }
                       console.log('setting VendorNum theme valid');
                       $('#VendorNum').jqxInput(themeSettingForValid);
                       return true;
               }
           },
           {
               input: '#PONumber',
               message: 'Invalid PO Number!',
               action: 'blur',
               rule: function() {
                       var p = $('#PONumber').jqxInput('val'),
                           v = $('#VendorNum').jqxInput('val'),
                           themeSettingForValid = { theme: 'energyblue' },
                           themeSettingForInvalid = { theme: 'orange' },
                           result = false;
                       console.log('p.length = ' + p.length + ', p = "' + p + '", v.length = ' + v.length + ', v = "' + v + '"');
                       if (p.length == 6) {
                          if (v.length == 6) {
                             if ((p == 'PYROLL' || p.substr(0, 4) == 'PYRL') && v != '999999') {
                                $('#VendorNum').jqxInput(themeSettingForInvalid);
                                return false;
                             } else {
                                console.log('setting VendorNum theme valid');
                                $('#VendorNum').jqxInput(themeSettingForValid);
                             }
                          }
                       }
                       return true;
               }
           },
           {
               input: '#AccountNumber',
               message: 'Invalid Account Number!',
               action: 'blur',
               rule: 'required'
           }
         ],
      });
      $("#jqxbutton").click(function () {
        $('#testForm').jqxValidator('validate');
      });
      $('#ChangeToBlue').click(function () {
        var themeSettingForValid = { theme: 'energyblue' };
        $('#VendorNum').jqxInput(themeSettingForValid);
      });
      $('#ChangeToOrange').click(function () {
        var themeSettingForInvalid = { theme: 'orange' };
        $('#VendorNum').jqxInput(themeSettingForInvalid);
      });
    });
    
    </script>
    
    Problem changing themes #75075

    Peter Stoev
    Keymaster

    Hi Craig Matthews,

    We will test your scenario regarding jqxInput and please write in jqxInput Forum when you have questions about it. If we reproduce an issue, we will add a work item. For now, you can use “removeClass” jquery function to remove unnecessary CSS classes if necessary.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Problem changing themes #75080

    Craig Matthews
    Participant

    Hi Peter Stoev,

    I posted in this forum as I wasn’t sure where to post it, since this is not just related to jqxInput. It also happens with jqxMaskedInput and jqxNumberInput. It may apply to any of the input widgets.

    I don’t understand your

    For now, you can use “removeClass” jquery function to remove unnecessary CSS classes if necessary.

    I was looking for a workaround like maybe jqxToolTip.

    Problem changing themes #75083

    Peter Stoev
    Keymaster

    Hi Craig Matthews,

    If it happens with other widgets, we will look into it. Until then, you can use removeClass where necessary. CSS classes applied to inputs are documented on the documentation page. I do not understand why you were looking for a workaround with jqxToolTip. This is about Themes, not jqxToolTip and jqxValidator adds appropriate Styles to Invalid Inputs automatically.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.