jQWidgets Forums

Tagged: combobox validation

This topic contains 3 replies, has 2 voices, and was last updated by 4xjbh 11 years, 5 months ago.

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

Author

Combobox Validation Posts

October 8, 2013 at 2:02 am Combobox Validation #30384

4xjbh

Participant

I have a combobox configured but it is not validating when a option is selected or upon save. What have I done wrong?

Thanks in advance, James

combo:

$(“#company_id”).jqxComboBox({
searchMode: “containsignorecase”,
source: dataAdapter,
autoComplete: true,
placeHolder: “Please Select”,
displayMember: “company_name”,
valueMember: “id”,
width: “245px”
});

rule:

{ input: “#category_id”, message: “Category is required.”, action: “keyup,blur”, rule: “required” }

save:

$(“#save”).click(function(){
$(‘#project’).jqxValidator(‘validate’);
});

October 8, 2013 at 2:26 am Combobox Validation #30385

4xjbh

Participant

rule is actually

{ input: “#company_id”, message: “Company is required.”, action: “keyup,blur”, rule: “required” }

October 9, 2013 at 2:54 am Combobox Validation #30470

Peter Stoev

Keymaster

Hi 4xjbh,

Here’s a sample with ComboBox validation on blur:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample, the jqxValidator displays error labels instead of error tooltips.</title>
    <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/jqxexpander.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/jqxcheckbox.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme()
            $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
     
            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
            });
            $("#combo").jqxComboBox({ width: 200, height: 25, source: ['Peter', 'Nancy', 'Anthony'] });
                   // initialize validator.
            $('#testForm').jqxValidator({
                rules: [
                         {
                             input: '#combo input', message: 'Invalid input', action: 'blur', position: 'right:20,0', rule: function (input, commit) {
                                var value = $('#combo').val();
                                if (value !== "Peter") {
                                    return false;
                                }
                                return true;
                            }
                         }
                ]
            });
        });
    </script>
  
</head>
<body class='default'>
    <div id="register">
        <div><h3>Register</h3></div>
        <div style="overflow: hidden;">
            <form id="testForm" action="./">
                <table class="register-table">
                    <tr>
                        <td valign="top">Combo:</td>
                        <td valign="top"><div id="combo"></div></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

October 10, 2013 at 6:42 am Combobox Validation #30525

4xjbh

Participant

Thanks Peter.

Selecting an item in the list validates ok. The alert I have included here displays a length of 3 which is correct but if I clear the input and validate again the length is still 3 and no validation alert tags are displayed.

{ input: “#company_id”, message: “Client is required.”, action: “blur”,
rule: function (input, comkmit) {
var value = $(“#company_id”).val();
// alert(value.length);
if (value.length > 0 ) { return true; } else {return false;}
}
},
{ input: “#email”, message: “Invalid e-mail!”, action: “keyup”, rule: “email” }] });

This may help. http://youtu.be/e2sehrzsDqM

Author

Posts

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

You must be logged in to reply to this topic.