Problem changing themes - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: html input, Input, jQuery Input, jquery ui input, jqwidgets input, Theme

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

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

Author

Problem changing themes Posts

August 23, 2015 at 10:27 pm 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>

August 24, 2015 at 5:31 am 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

August 24, 2015 at 5:51 am 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.

August 24, 2015 at 6:23 am 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

Author

Posts

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

You must be logged in to reply to this topic.