jQWidgets jqxComboBox validateSelection Property

Last Updated : 07 May, 2023

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxComboBox is used to represent a jQuery ComboBox widget that contains an input field with autocomplete functionality and a list of selectable items displayed in a drop-down.

The validateSelection property is used to specify if an item from the displayed combobox is capable of being selected in multiple-selection mode or not. It is of type function and its default value is “null”.

Syntax:

To set the validateSelection property.

$('#selector').jqxComboBox({ validateSelection: function(name)
     {
          if (name == "jQuery")
              return false;
           return true;
     }
});

To get the validateSelection property.

var vs = $('#selector').jqxComboBox('validateSelection');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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/jqxcombobox.js”></script>

Example 1: The below example illustrates the jQWidgets jqxComboBox validateSelection property.

HTML

<!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.11.1.min.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqx-all.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
              jQWidget jqxComboBox validateSelection property  
          </h3> 
  
        <div id='jqxCB'></div> 
    </center> 
  
    <script type="text/javascript"> 
        var source = [ 
            "jQuery", 
            "HTML", 
            "BootStrap", 
            "java", 
            "Python", 
            "CSS" 
        ]; 
  
        $("#jqxCB").jqxComboBox({ 
            source: source, 
            width: '250px', 
            multiSelect: true, 
            validateSelection: function (name) { 
                if (name == "jQuery") 
                    return false; 
                return true; 
            } 
        }); 
  
        $("#jqxCB").jqxComboBox('selectItem', 'jQuery'); 
        $("#jqxCB").jqxComboBox('selectItem', 'BootStrap'); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxComboBox validateSelection property in jQWidgets.

HTML

<!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.11.1.min.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqx-all.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
              jQWidget jqxComboBox validateSelection property  
          </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <input type="button" 
               id="btn" 
               value="Click Here" 
               style="padding: 5px 14px;  
                      margin-top: 15px;"> 
        <div id="log"></div> 
    </center> 
  
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var data = [ 
                { 
                    name: "HTML", 
                    index: 0, 
                }, 
                { 
                    name: "CSS", 
                    index: 1, 
                }, 
                { 
                    name: "JavaScript", 
                    index: 2, 
                }, 
                { 
                    name: "jQuery", 
                    index: 3, 
                }, 
                { 
                    name: "Angularjs", 
                    index: 4, 
                }, 
                { 
                    name: "Bootstrap", 
                    index: 5, 
                } 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                width: '250px', 
                animationType: 'slide', 
                displayMember: "name", 
                validateSelection: null, 
            }); 
  
            $('#btn').click(function () { 
                var vs = $('#jqxCB').jqxComboBox('validateSelection'); 
                if (vs === null) { 
                    $('#log').text("Null!"); 
                } 
                else { 
                    $('#log').text("Not null!"); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>