jQuery Validator

Set the hintType 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>
                <input type="text" id="userInput" class="text-input" />
            </td>
        </tr>        
    </table>
</form>
<input type="button" style="margin: 30px;" id="jqxbutton" value="Submit" />

JavaScript

$('#testForm').jqxValidator({
  hintType: 'label',
  rules: [
    /*
    {
      input: '#userInput',
      message: 'Username is required!',
      action: 'blur, change',
      rule: 'required'
    },*/
    {
      input: '#userInput',
      message: 'Username length must be more than 2 symbols!',
      action: 'change, blur',
      rule: function (input, commit) {
        if (input.val().length <= 2) {
        	$("#userInput").jqxTooltip('open');
          $("#userInput").css('backgroundColor', 'red');
          return false;
        } else {
        	$("#userInput").jqxTooltip('close');
          $("#userInput").css('backgroundColor', '');
        	return true;
        }       
      }
    }]
});

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

$("#userInput").jqxTooltip({
  position: 'right',
  content: 'Error Message',
  autoHide: false, trigger: "none", closeOnClick: false
});

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