jQWidgets jqxBarcode invalid Event

Last Updated : 13 Sep, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBarcode is used to indicate a widget that can display various forms of bar codes.

The invalid event is activated whenever the value of the displayed QR code is not valid.

Syntax:

$('Selector').on("invalid ", function (event) {
 // Code
});

Linked Files: Download jQWidgets from the given 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/jqxcore.js”> </script>
<script type=”text/javascript” src=”jqwidgets/jqxbarcode.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>

Example 1: The below example illustrates the jqxBarcode invalid event 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="jqwidgets/jqxcore.js"> 
    </script> 
      <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbarcode.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>jQWidgets jqxBarcode invalid Event</h3> 
        <div id="jqxb"></div> 
        <div id="log"></div> 
    </center> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxb").jqxBarcode({ 
                value: "Code13o", 
            }); 
            $("#jqxb").on('invalid', function (event) { 
                $("#log").text("Triggered!"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following is another example of the jqxBarcode invalid event 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="jqwidgets/jqxcore.js"> 
    </script> 
      <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbarcode.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
  
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>jQWidgets jqxBarcode invalid Event </h3> 
        <div id="jqxb"></div> 
        <br> 
        <div id="log"></div> 
    </center> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxb").jqxBarcode({ 
                value: "Code", 
            }); 
            $("#jqxb").on('invalid', function (event) { }); 
            var iv = $('#jqxb').jqxBarcode('isValid'); 
            if (iv === false) { 
                $('#log').text("Triggered!"); 
            } 
            else { 
                $('#log').text("Not triggered!"); 
            } 
        }); 
    </script> 
</body> 
  
</html>