Insert Only Numbers Using jQuery

Today i will tell you how to make custom validation using jQuery, this validation allows only numbers to insert in the input field.

Demo: https://jsfiddle.net/javedfiddle/g9z57pew/

HTML

<input type="text" name="numbers" class="numbers" placeholder="Enter Only Numbers" />

JQuery

$(".numbers").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
return false;
}
});

Complete Webpage

<html>
<head>
<title>Insert Only Numbers Using jQuery</title>
</head>
<body>
<input type="text" name="numbers" class="numbers" placeholder="Enter Only Numbers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".numbers").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
return false;
}
});
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/g9z57pew/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful. 🙂

Advertisements

Required and Readonly using jQuery

Sometimes we need to make field readonly along with required attribute but unfortunately, readonly and required do not work together just because if field is required than it can not be readonly so user must need to enter data in it. I was also stuck in a problem of using them together when i was using jQuery DatePicker with required format and i don’t want user to type value but just click on icon and select date as per required format. Below code can help you to achieve it.

Demo: https://jsfiddle.net/javedfiddle/LbyL4ar9/

HTML

<form action="" method="">
<input type="text" name="date" class="date readonly" placeholder="DD/MM/YYYY" required /><br /><br />
<input type="submit" value="Submit" />
</form>

JQuery

// To make field readonly
$(".readonly").keydown(function(e){
e.preventDefault();
});

// To user jQuery DatePicker
$(function() {
$( ".date" ).datepicker({
dateFormat : 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});

Complete Code

<html>
<head>
<title>Required and Readonly using jQuery</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<form action="" method="">
<input type="text" name="date" class="date readonly" placeholder="DD/MM/YYYY" required /><br /><br />
<input type="submit" value="Submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
// To make field readonly
$(".readonly").keydown(function(e){
e.preventDefault();
});

// To user jQuery DatePicker
$(function() {
$( ".date" ).datepicker({
dateFormat : 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/LbyL4ar9/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful. 🙂

jQuery Datepicker with Icon

Today i will explain how to use jQuery Datepicker with Icon, it is very simple to use. We need the following libraries to use it.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

jQuery Datepicker with Icon

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

HTML

In the below HTML i used class data for jQuery Datepicker and made it readonly so that user can not type date in this input field, they should need to insert date via calendar icon button then date will be entered as per our given format in JQuery.

<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />

JQuery

Change buttonImage URL, make sure you first upload image on your host then link to it. You can also change date format as per your need such as dd-mm-yy or set mm-dd-yy anything you wish. If you want that calendar should open when click on input field so change showOn: “button” to showOn: “both”.

$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 

Complete Page

<html>
<head>
<title>jQuery Datepicker with Icon</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful. 🙂