jQuery Validator

Set the rules property of the jqxValidator. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>Username:</td>
            <td>
                <div id="combobox"></div>
            </td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td>
                <textarea id="textarea"></textarea>
            </td>
        </tr>
    </table>
</form>
<input type="button" style="margin:30px;" id="jqxbutton" value="Submit" />

JavaScript

$('#testForm').jqxValidator({
  rules: [
    {
      input: '#combobox', 
      message: 'Invalid input', 
      action: 'blur', 
      position: 'right:20,0', 
      rule: function (input, commit) {
        var value = $('#combobox').val();
        if (value !== "Peter") {
          return false;
        }
        return true;
      }
    },
    {
      input: '#textarea',
      message: 'Username is required!',
      action: 'blur',
      rule: 'required'
    }
  ],
});

$("#combobox").jqxComboBox({ 
  width: 200, 
  height: 25, 
  source: ['Peter', 'Nancy', 'Anthony'] 
});

$("#textarea").jqxTextArea({ width: 200, height: 25 });

$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  width: 100,
  height: 30
});

$("#jqxbutton").click(function () {
  $('#testForm').jqxValidator('validate');
});