Implementing JQuery Input Masking

- - Kode

Welcome to another KodeSmart tutorial. If you would like to see a special how to tutorial on any Software or Programming topic please drop us a comment in the form below.

Today we take a look at Implementing JQuery Input Masking on html fields. JQuery Input Masking refers to using placeholder test inside input fields in order to enhance usability whilst preventing users from common mistakes. A great example of this is illustrated in the demo at the end of this tutorial.

Example of a masked input field

Input masking in text fields are primarily useful on Phone Number fields, Date of Birth fields and even Credit card fields. The idea is to group the placeholder into a format that visitors can quickly recognize. As a result persons are usually made clear about how the input should appear. A good example is specifying YYYY/MM/DD in a birthday field, anyone inserting the data immediately knows that they need to insert 4 numbers for the year and two for the month and day.

Now let’s look at Implementing JQuery Input Masking on field.

THE HTML – Presentation Layer


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>	
    <script src="jquery.maskedinput.min.js"></script>
    <script src="masked.js"></script>	
</head>

<body>
	<div class="birthday_datepicker">
		<label>Birth Date: </label>
		<input id="dob" name="dob" class="datepicker" placeholder="(yyyy/mm/dd)" required="required" style="width:300px;padding:5px;"/>
	</div>
</body>
</html>

 

We will now use jquery to target the dob field and apply the validation. Our validation will highlight the field in red if an invalid date is entered. The field will otherwise be cleared in the input is incomplete.

THE JQUERY – This does the magic


jQuery(function($){;
    $.mask.definitions['y'] = '[12]';
    $.mask.definitions['m'] = '[01]';
    $.mask.definitions['d'] = '[0-3]';
    $("#dob").mask("y999/m9/d9", { placeholder: "yyyy/mm/dd" });

    function verifyDate(datevalue, divID) {
        var done = false;
        if (datevalue != null || datevalue != '') {
            var tmp = datevalue.split('/');
            var year = tmp[0];
            var month = tmp[1];
            var day = tmp[2];
            var fromYear = 1900;
            var now = new Date();

            if (year >= fromYear && year <= now.getFullYear()) {
                if (month >= 1 && month <= 12) {
                    if (day >= 1 && day <= 31) {
                        clean($(divID));
                        done = true;
                    } else {
                        $(divID).css("background","#fcf9f9");
                    }
                } else {
                    $(divID).css("background","#fcf9f9");
                }
            } else {
                $(divID).css("background","#fcf9f9");
            }
        }
        return done;
    }

    function clean(divID) {
        $(divID).css("background","#ffffff");
    }
});

 

Implementing JQuery Input Masking is a straight forward approach to enhancing usability and enforcing structure on data inserted into html fields. If you would like to use this in your next web project see the demo/download links below.

Please feel free to ask any quesion in the comments section at the end. Happy Coding!

 

DEMODOWNLOAD

Post Tags:
Join the Newsletter

Sign up for our personalized daily newsletter

Kodesmart

#1 GUIDE TO DRUPAL, WORDPRESS, CSS AND CUSTOM CODING | BEGINNER TO PRO

Related Posts