jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxValidator is used for validation of the HTML form with the help of JavaScript. It has some set of build-in rules according to the requirement for the validation of the user inputs, e-mail, SSN, ZIP, max value, min value, interval, etc. The custom rules can also be written as per the specific requirements.
The onSuccess property is used for setting or getting a callback function that will be called on validation of success.
Syntax:
-
For setting the onSuccess property.
$('#jqxValidator').jqxValidator({ onSuccess: function () { $("#log").html('The form has been filled correctly.'); } });
-
For getting the onSuccess property.
var onError = $('#jqxValidator').jqxValidator('onSuccess');
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
Example: The below example illustrates the jQWidgets jqxValidator onSuccess property.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" />
< script type = "text/javascript" src = "scripts/jquery.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqxcore.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqx-all.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqxvalidator.js" >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
jQWidgets jqxValidator onSuccess Property
</ h3 >
< form id = "Employee_Form" >
< table >
< tr >
< td >Employee_Name:</ td >
< td >
< input type = "text" id = "Employee_Name" />
</ td >
</ tr >
< tr >
< td >Employee_Id:</ td >
< td >
< input type = "text" id = "Employee_Id" />
</ td >
</ tr >
< tr >
< td >Designation:</ td >
< td >
< input type = "text" id = "Designation" />
</ td >
</ tr >
< tr >
< td >Base_Location:</ td >
< td >
< input type = "text" id = "Base_Location" />
</ td >
</ tr >
</ table >
</ form >
< input type = "button" style = "margin:28px;" id = "button_for_onSuccess" value = "Value of the onSuccess property" />
< div id = "log" ></ div >
< script type = "text/javascript" >
$(document).ready(function () {
$('#Employee_Form').jqxValidator({
onSuccess: function () {
$("#log").html((
'The form has been filled correctly.'));
},
Rules: [{
input: '#Employee_Name',
message: 'Employee name is mandatory!',
rule: 'required'
},
{
input: '#Employee_Id',
message: 'Employee_Id is mandatory!',
rule: 'required'
},
{
input: '#Designation',
message: 'Designation is mandatory!',
rule: 'required'
},
{
input: '#Base_Location',
message: 'base location is mandatory!',
rule: 'required'
}],
});
$("#button_for_onSuccess").jqxButton({
width: 300
});
$("#button_for_onSuccess").click(function () {
$('#Employee_Form').jqxValidator('validate');
});
});
</ script >
</ center >
</ body >
</ html >
|
Output: