HTML Form Validations
- Get link
- Other Apps
In this blog, we will see HTML form validation code in JavaScript.
My another blog on AMP HTML and Angular JS.
Form validation for Alphabet only:
Sometimes you may require allowing the only alphabet in a particular input field. For Eg first name and last name, a field should not allow any other character apart from an alphabet.
You may trigger this function on keypress, see below line of code:
Email Validation:
To check or call this function use below line of code:
To Allow only numeric character for fields like phone number:
To Allow max length in an input fields:
Form validation for Alphabet only:
Sometimes you may require allowing the only alphabet in a particular input field. For Eg first name and last name, a field should not allow any other character apart from an alphabet.
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
<input type="text" id="txtFname" onkeypress="return onlyAlphabets(event,this);"/>
function isValidEmail(email) {
var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
return reg.test(email);
}
if (isValidEmail($("#txtEmail").Val()) == false) {//If regex does not match then return false
alert('Invalid Email ID');
return false;
}
$('#txtPhone').keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
This can be achieved by putting the same id (txtPhone)
<input type="text" id="txtPhone" maxlength="10"/>
$('#txtPhone').keyup(validateMaxLength);
function validateMaxLength() {
var text = $(this).val();
var maxlength = $(this).data('maxlength');
if (maxlength > 0) {
$(this).val(text.substr(0, maxlength));
}
}
<input type="text" id="txtPhone" maxlength="10" data-maxlength="10"/>
Popular
Top 30 ASP.Net Web API Interview Questions and Answers
CAML Query Tutorial for SharePoint 2013 and 2010 - A Complete tutorial guide
CAML Query is one of the most important topics in SharePoint. CAML Query is the way for querying items from SharePoint objects like List and Library. This blog is helpful in SharePoint 2010 development as well as in SharePoint 2013 development.
What is MicroService? A modern approach to develop software applications
Before describing MicroServices we should first understand distributed technologies we already have in the industry. Prior to MicroServices, we have already Web Services, WCF Service and latest one from Microsoft i.e. ASP.Net Web API. Then Why MicroService Architecture?
You may read about all these distributed technologies in details in my earlier blog.
You may read about all these distributed technologies in details in my earlier blog.
How to consume RESTful APi from server side code - C#
What's new in C# 6.0 language?
SharePoint Interview Questions and Answers
Introduction to ASP.NET Core - Basic Introduction with Visual Studio 2015 and 2017
All about SharePoint 2010 Content Type Hub - SharePoint 2010 Tutorial
ASP.Net Web API Security
If you are new to ASP.Net Web API then please start from the beginning level. What is ASP.Net Web API? In the previous blog, I wrote about Routing in Web API. You may also like .Net Core Introduction and MicroService Architecture.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
I have also explained, How to create a secure Web API? in my earlier blog.
In this blog, let's discuss the Web API security in details.
Getting started with Microsoft Azure
If you are new to Microsoft Azure, then please read my earlier blog on Cloud Computing and Microsoft Azure introduction.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
In this blog, I will explain how to create resources in Azure Dashboard and will show you screenshots. This will be a totally new experience for me as well because I am also new to Cloud Computing and wanted to share my experience through my blog.
Tags
Tags
cloud-computing12
sharepoint-201310
interview8
sql8
webservice7
angularjs6
entity-framework6
design-pattern5
linq5
sharepoint-programming5
powershell4
socialmedia4
caml3
dot-net-core3
rest3
workflow3
ajax2
aws2
html2
infopath2
javascript2
oops2
searchservice2
sharepoint-interview2
soa2
timer job2
website2
3tier1
active-directory1
caching1
devops1
fba1
imageupload1
json1
list1
managed-metadata-service1
metadata1
odata1
page-layout1
performance1
run with elevated1
safecontrol1
security1
sharepoint interview questions1
sharepoint security1
sharepoint-architecture1
sharepoint-branding1
sharepoint-migration1
sharepoint-service1
sharepoint-topics1
sharepointlist1
site-definition1
soap1
uls1
validation1
viewstate1
xml1
Show more
Show less
Comments
Post a Comment
Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks