JavaScript Validator

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

by hugosolar

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">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>Username:</td>
            <td>
                <input type="text" id="userInput" 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: 10px;" id="jqxbutton" value="Submit" />

CSS

.validate-error {
  border-color: red;
}
.material-icons {
  position: relative;
  top: .3rem;
  left: -1.3rem;
  font-size: 1.1rem !important;
}

JavaScript

$('#testForm').jqxValidator({
     onError: function () {
         alert('You have not filled the form correctly!');
     },
     hintType: 'label',
     rules: [{
         input: '#userInput',
         message: 'Username is required!',
         action: 'keyup, blur',
         rule: 'required',
         hintRender: function(message, input) {
						message = $('<i class="material-icons">info</i>')
						    .insertAfter(input)
						    .jqxTooltip({ content: message, position: 'right' });
			    	input.addClass('validate-error');

				    return message;
				}

     }, {
         input: '#emailInput',
         message: 'Invalid e-mail!',
         action: 'keyup, blur',
         rule: 'email',
         hintRender: function(message, input) {
						message = $('<i class="material-icons">info</i>')
						    .insertAfter(input)
						    .jqxTooltip({ content: message, position: 'right' });
			    	input.addClass('validate-error');

				    return message;
				}

     }, {
         input: '#emailInput',
         message: 'Invalid e-mail!',
         action: 'keyup, blur',
         rule: 'required',
         hintRender: function(message, input) {
						message = $('<i class="material-icons">info</i>')
						    .insertAfter(input)
						    .jqxTooltip({ content: message, position: 'right' });
			    	input.addClass('validate-error');

				    return message;
				}

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