Html Validator

Invoke the validate method 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">
<div id="changeVulStateDialog" >
<div class="col-lg-12 col-md-12 col-sm-12">
    <table class="register-table">
      <tr>
            <td>Status:</td>
            <td>
<div id='jqxDropDownList'></div>
            </td>
        </tr>
        <tr>
            <td>Name:</td>
            <td>
            <input type="text" id="uName" class="text-input">
            </td>
        </tr>
         <tr>
            <td>Comments:</td>
            <td>
            <textarea type="text" id="comments" class="text-input"></textarea>
            </td>
        </tr>
    </table>
<input type="button" style="margin: 30px;" id="jqxbutton" value="Submit" />
</div>
</div>

CSS

.jqx-validator-error-label {
    color: #fff;
    font-size: 12px;
    background: #dd4b39;
    padding: 3px 5px;
    border-radius: 3px;
}

JavaScript

$("#changeVulStateDialog").jqxWindow({
		height : 350,
		width : 350,
	  autoOpen : true,
    title : "Custom Window",
		isModal : true,
		resizable : false,
    theme: 'custom'
	});
  
   var source = [
      "Open",
      "Closed",
      "Resolved",
      "Reopen"];
  // Create a jqxDropDownList
  $("#jqxDropDownList").jqxDropDownList({
      source: source,
      selectedIndex: 0,
      width : '100%',
		  height : '30px',
      dropDownHeight: 110,
      theme: 'custom'
});
	$("#comments").jqxInput({
		width : '100%',
		height : '30px'
	});
 	$("#comments").jqxInput({
		width : '85%',
		height : '50px',
		theme : 'custom'
	});

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

 $("#jqxbutton").click(function () {
     $('#changeVulStateDialog').jqxValidator('validate');
 });
 
  $('#changeVulStateDialog').jqxValidator({
  position: 'bottom',
  hintType : 'label',
     rules: [
     {
         input: '#comments',
         message: 'Comments are required!',
         action: 'keyup, click, change, blur, focus',
        rule: 'required'

     },{
         input: '#uName',
         message: 'Name is required!',
         action: 'keyup, click, change, blur, focus',
        rule: 'required'

     }]
 });
 $('#changeVulStateDialog')
			.on(
					"resetFields",
					function() {
						 $('#changeVulStateDialog').jqxValidator('hide');
					});