jQWidgets Forums

jQuery UI Widgets › Forums › Editors › NumberInput › number input always fail

Tagged: , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    number input always fail Posts
  • August 20, 2014 at 3:35 pm number input always fail #58581

    jusmas
    Participant

    Hi.. I am using a number input and facing the following issues.

    – It always display a zero and on each validation it sets the value to NAN.
    – Even if the validation is success, it always show min value required error label..

    here is the code segment

    $("#total_cost").jqxNumberInput({width: '120px',height: '25px',inputMode: 'simple',min:100,decimalDigits:0});
$('#costEntryForm').jqxValidator({
	                rules: [
{input:'#total_cost', message:'Amount is required!', action:'keyup,blur', rule:'required'},
	                       		{input:'#total_cost', message:'Minimum value is 100', action:'blur', rule:
		                       		 function (input) {              			        
		                       		     if($("#total_cost").val()>100 ) return true; else return false;
		                       		 }
	                       		},
	                       	],
            		hintType: "label"
});

// Validate the Form.
$("#btn_submit").click(function () {
	alert("total_cost " + $('#costEntryForm').jqxValidator('validateInput', '#total_cost'));
});
    August 21, 2014 at 7:18 am number input always fail #58605

    Dimitar
    Participant

    Hello jusmas,

    The NaN error may occur if you try to initialize your number input from an input element while it has to be initialized from a div.

    A “required” rule is not needed for jqxNumberInput because it is not possible its value to be “”.

    Having these in mind, here is an example with the custom rule:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxnumberinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#total_cost").jqxNumberInput({ width: '120px', height: '25px', inputMode: 'simple', decimalDigits: 0 });
            $('#costEntryForm').jqxValidator({
                rules: [{
                    input: '#total_cost',
                    message: 'Minimum value is 100',
                    action: 'blur',
                    rule: function (input) {
                        if (input.val() >= 100)
                            return true;
                        else
                            return false;
                    }
                }],
                hintType: "label"
            });
            // Validate the Form.
            $("#btn_submit").click(function () {
                alert("total_cost " + $('#costEntryForm').jqxValidator('validateInput', '#total_cost'));
            });
        });
    </script>
</head>
<body class='default'>
    <form id="costEntryForm">
    <div id='total_cost'>
    </div>
    </form>
    <button id="btn_submit">
        Validate</button>
</body>
</html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.