Html Validator

Invoke the validate method of the jqxValidator. Author: http://jqwidgets.com

by Mohamed azher

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="container"></div>
<input type="button" style="margin: 30px;" id="jqxbutton" value="Submit" />

JavaScript

var frm = '<form id="testForm" action="./"><table class="register-table"><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>'; 

frm = $('<div id="frmContainer">'+frm+'</div>');
try{
frm = frm.find('#testForm').jqxValidator({
     rules: [

     {
         input: '#userInput',
         message: 'Username is required!',
         action: 'blur',
         rule: 'required'

     }, {
         input: '#emailInput',
         message: 'Invalid e-mail!',
         action: 'blur',
         rule: 'email'
     }, {
         input: '#emailInput',
         message: 'Invalid e-mail!',
         action: 'blur',
         rule: 'required'
     }]
 });
}
catch(e){
    alert(e);
}
$("#container").append(frm);
 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 100,
     height: 30
 });

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