The jQuery utility methods are useful for doing routine programming tasks. The utility methods uses $.namespace.For form validation we commonly use 3 utility methods.
1) empty: – The empty() method helps to check if an element has a value or not.
2) exists: – The exists() method can be used to check whether or not the specified elements exist in the DOM tree.
3) isNullOrEmpty: – This function calls the exists and empty functions internally and can be used in both aforementioned contexts.
Eg: –
/*!
| @ Utility methods to check whether or not an element exists in the DOM
| and if it has a value or not.
| @Require: jQuery library
| @author : kos
| @url : http://coderevision.com/
| @license : Microsoft Public License (Ms-PL)
| @license url : http://www.microsoft.com/opensource/licenses.mspx#Ms-PL
*/
(function($)
{
/*!
| @ Check if an input element has value
| @return boolean
*/
$.fn.empty = function()
{
if ( $.trim(this.val()) == ‘‘ ) { return true; }
else { return false; }
};
/*!
| @ Check if an element exists in the DOM
| @return boolean
*/
$.fn.exists = function()
{
return ((this.length > 0) ? true : false);
}
/*!
| @ Check if an element exists in the DOM and if it has a value.
| This method combines the two aforementioned methods.
| @return boolean
*/
$.fn.isNullOrEmpty = function()
{
if ( ! this.exists() ) { return true; }
if ( this.empty() ) { return true; }
return false;
}
})(jQuery);
The below example show how to use the utility code: – Eg: –
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>jQuery utility methods for form validation</title>
<script src=“jquery.js”></script>
<script src=“jquery.empty.js”></script>
<script>
jQuery(document).ready(function()
{
//# check if the elements exists
if ( ! $(‘#username’).exists() ||
! $(‘#password’).exists() ||
! $(‘#submit’).exists())
{
alert(‘The form is invalid!’);
}
$(‘#login_form’).submit(function()
{
if ($(‘#username’).empty()) {
alert(‘Username is required!’);
return false;
}
if ($(‘#password’).empty()) {
alert(‘Password is required!’);
return false;
} }); });
</script>
</head>
<body>
<form>
@@ To test for isNullOrEmpty() just delete one or both
@@ of the following inputs.
<label>Username: <input type=“text” name=“username” id=“username” /></label>
<label>Password: <input type=“password” name=“password” id=“password” /></label>
<p>
<input id=“submit” type=“submit” value=“Submit” />
</p>
</form>
</body>
</html>
Other utilities
1) .trim(): – This method removes leading and trailing whitespaces.
Eg: –
$.trim(‘ lots of extra whitespace ‘); // It will return huge number of extra spaces.
2) .each(): – .each() method iterates over objects and arrays.
Eg: –
$.each([‘apple’,’banana’,’peach’], function(index, value) {
console.log(‘index: ‘ + index + ‘ value: ‘ + value);
} );
$.each({ firstname : ‘laurent’, lastname : ‘tonon’ }, function(key, value) {
console.log(key + ‘ : ‘ + value);
} );
3) .inArray(): – It checks if a value is contained in an array. If found it returns the value’s index of the array. Returns -1 if the value is not found. Eg: –
var myArray = [ 23, 46, 31, 12 ];
if ($.inArray(31, myArray) !== -1) {
console.log(‘found it!’);
}
4) .extend(): – This method helps the merging mechanism. This method merges the first passed object using the properties of the other passed objects as arguments. Eg: –
var myFirstObject = { fruit : ‘apple’, vegetable: ‘carrot’ };
var mySecondObject = { fruit : ‘banana’ };
var resultingObject = $.extend(myFirstObject, mySecondObject);
console.log(myFirstObject.fruit);
console.log(resultingObject.fruit);
5) .type(): – This function will return the built in javaScript type for the object. The mainly used jQuery return types are boolean, number, string, function, array, date, regexp, null, undefined, object.
Eg: –
$(document).ready(function() {
var iVal = 12;
$.type(iVal); //number
iVal = ‘jQuery’;
$.type(iVal); //string
} );
6) .trim(): – trim() method removes white spaces from beginning and end of the string. Eg: –
$(document).ready(function() {
var str = ‘ jquery by example ‘;
str = $.trim(str);
} );
A JQuery utility uses three different methods to determine the type of a variable. They are,
1) $.isFunction():- The object is a function it return the true.
2) $.isPlainObject(): – Check to see if an object is a plain object.
Eg: –
jQuery.isPlainObject({}) // true
jQuery.isPlainObject(“test”) // false
3) $.isArray(): – Returns true if the object is an array.
Eg: –
var arrFirst = [50, 22, 10, 19, 22, 10];
var isArray = $.isArray(arrFirst);
4) $.isEmptyObject(Object): – It returns true if the object doesn’t define any methods or properties.
Eg: –
var arrFirst = [50, 22, 10, 19, 22, 10];
var isObject = $.isEmptyObject(arrFirst);
5) $.isNumeric(Object): – This method returns true if the object is a number.
Eg: –
var num = 1;
var isNumeric = $.isNumeric(num);
6) $.isWindow(Object): Object is a Window this function will return true.
Eg: –
.$(document).ready(function(){
alert($.isWindow(window));
var isFrame = $(“#objFrm”);
alert($.isWindow(isFrame));
});
7) $.isXMLDoc(Object): – The object is an XML document this function return the true value.
Eg: –
$(document).ready(function() {
$.isXMLDoc(document) // false
$.isXMLDoc(document.body) // false
});
No comments:
Post a Comment