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>custom rule (email):</td>
            <td>
                <input type="text" id="email" class="text-input" />
            </td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td>
                <input type="text" id="emailInput" class="text-input" />
            </td>
        </tr>
    </table>
</form>
<input type="button" style="margin:30px;" id="jqxbutton" value="Submit" />

JavaScript

$('#testForm').jqxValidator({
  rules: [
    {
      input: '#email',
      message: 'Invalid e-mail!',
      action: 'blur',
      rule: function (input, commit) {
        // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
        
        var email = $('#email');
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
               
        return re.test(String(email.val()).toLowerCase());
      }
    },

    {
      input: '#emailInput',
      message: 'Invalid e-mail!',
      action: 'blur',
      rule: 'email'

    }],
});
$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  width: 100,
  height: 30
});
$("#jqxbutton").click(function () {
  $('#testForm').jqxValidator('validate');
});