jQWidgets Forums

Tagged: change, DropDownList, Input, jqxDropDownList, jqxvalidator, message, option, validator

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 10 years, 10 months ago.

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

Author

display dynamic message from custom rule Posts

July 2, 2014 at 12:59 pm display dynamic message from custom rule #56665

Devesh

Participant

I want to show a dynamic message based on some conditions in custom rule. Is it possible?
I am posting some simplified scenarios.

Simplified scenario:
Suppose I have a dropdown with two items.
On click of one item I want to check whether a 1st input element has been filled.
On the selection of other item I want to check whether the 2nd input element is filled

Based on these decision I want to show a validation message for both of selection:
Such as “Hey! You forgot to fill 1st element”
Or
“Hey! You forgot to fill 2nd element”.

(Note the emphasis on 1st and 2nd ).

Another Scenario
In this scenario I want to show a value in message which is calculated in a custom rule.

July 2, 2014 at 1:04 pm display dynamic message from custom rule #56667

Devesh

Participant

AN example code is:


$('#form1').jqxValidator({
        rules: [
			{
              input: '#jqxNumericControl1',
              message: 'Some message',
              action: 'blur',
              rule: function () {
                  var value = $("#jqxNumericControl2").jqxNumberInput('getDecimal');
                     var calculatedValue= SomeCalculation(value);
					  return calculatedValue <= 999.99;                  
              }

          }
		  ]});

My intention is to show the calculatedValue in the message.

July 3, 2014 at 10:16 am display dynamic message from custom rule #56723

Dimitar

Participant

Hello Devesh,

1) You would need rules for every input you have. Each of them can have a custom rule which checks if the dropdownlist selection corresponds to it and return true if not (no need for validation). Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#options").jqxDropDownList({ source: ["1st", "2nd"], width: "200px", autoDropDownHeight: true });

            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'This field is required!', action: 'keyup', rule: function (input, commit) {
                    var value = $("#options").val();
                    if (value == "1st") {
                        if (input.val().length > 0) {
                            return true;
                        } else {
                            return false;
                        }
                    } else {
                        return true;
                    }
                }
                },
                { input: '#emailInput', message: 'This field is required!', action: 'keyup', rule: function (input, commit) {
                    var value = $("#options").val();
                    if (value == "2nd") {
                        if (input.val().length > 0) {
                            return true;
                        } else {
                            return false;
                        }
                    } else {
                        return true;
                    }
                }
                }]
            });
            $("#validate").click(function () {
                $('#testForm').jqxValidator('validate');
            });
        });
    </script>
</head>
<body>
    <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>
                <div id="options">
                </div>
            </td>
        </tr>
    </table>
    </form>
    <button id="validate">
        Validate</button>
</body>
</html>

2) Unfortunately, messages cannot be changed dynamically.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

July 16, 2014 at 10:29 am display dynamic message from custom rule #57292

Devesh

Participant

Hi Dimitar,

Regarding 2nd point, is there a plan to work on it?
If Yes then when is it planned (any tentative dates)?

Thanks
Devesh

July 16, 2014 at 10:32 am display dynamic message from custom rule #57293

Dimitar

Participant

Hi Devesh,

Our current development plans can be seen on the Roadmap.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.