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 validateInput() method is used for validating a single specific input of the specified jqxValidator.
Syntax:
$('#jqxValidator').jqxValidator('validateInput', 'Input');
Parameters: This method accepts a parameter that is illustrated below.
- Input: This is the specific input for which validation is being performed.
Return values: This method does not return any values.
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/jqxvalidator.js”></script>
Example: The below example illustrates the jQWidgets validateInput() method. In the below example, only the ‘Designation’ input has been validated.
<!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 validateInput() Method
</ 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_validateInput"
value = "Validate the 'Designation' Input" />
< script type = "text/javascript" >
$(document).ready(function () {
$('#Employee_Form').jqxValidator({
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_validateInput").jqxButton({
width: 250
});
$("#button_for_validateInput").click(
function () {
$('#Employee_Form').jqxValidator(
'validateInput', '#Designation');
});
});
</ script >
</ center >
</ body >
</ html >
|
Output: