There are multiple of solutions to jquery form validation without plugin. You can use simple javascript or jquery to complete validation. In this tutorial We are going to display you how to validate html form using jquery without plugin.
Jquery form validation example without plugin
Answer: Yes you Know it is 100% working for without plugin.
There are multiple of Articles on web which provide jquery validation but with the help of plugins. We will try my best to all about this in a easy way to step by step learn therefor you can simply complete validation in any of your web project like as a single page validation and contact form validation in javascript. We are apply validation validate form before submit on contact form.
Steps in form validation:
- make a contact form with user name, user email, user phone or mobile as well as Message or any suggestion input fields and also assign different user form id to each of the HTML input element.
- here Email Address must be valid and check with verify email address.
- mobile or Phone must be valid phone/mobile number with PP-PPPP-PPPP, PP.PPPP.PPPP and PP PPPP PPPP different types of the format.
- and here check with Apply Form validation on blur events
- When your form submitted successfully then check all the HTML input fields data valid or not.
Form HTML:
<div class="form-wrapper"> <h2>jQuery Form validation example without plugin</h2> <form name="contact-form" action="" method="post" id="contact-form"> <label>Name <span>*</span></label> <input type="text" name="your_name" id="name"> <label>Email <span>*</span></label> <input type="text" name="your_email" id="email"> <label>Phone <span>*</span></label> <input type="text" name="your_phone" id="phone"> <label>Message <span>*</span></label> <textarea name="Messages" cols="28" rows="5" id="Message"></textarea> <input type="submit" name="submit" value="Submit" id="storeContactForm"> </form> </div>
Above source code is the HTML contact form html script in which every HTML Form input field has unique created a id. We shall be using some ids for jquery data HTML input fields selector.
jQuery Script:
I am going to create validations on 2 events. One is on input blur and second is on form submit.
On Blur Validation:
When user goes to the next input without enter any text in current input then I will turn current input border red. And in email input, if user adds wrong email or wrong email pattern then I will turn email input border red. Same validation pattern will apply on phone number.
Check Empty Name Function:
function verifyEmptyFieldName(inputID)
{
$(inputID).blur(function(){
if($(this).val() == '')
{
$(this).css('border','1px solid red');
}
else
{
$(this).css('border','1px solid green');
}
});
}
Validate Email Function:
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
validateEmail is using regex to test either given email address is a valid email or not.
function verifyEmptyFieldEmailAddress(emailInputID)
{
$(emailInputID).blur(function(){
var email = $(emailInputID).val();
if (validateEmail(email))
{
$(this).css('border','1px solid green');
}
else
{
$(this).css('border','1px solid red');
}
});
}
verifyEmptyFieldEmailAddress function apply validation with the help of validateEmail function.
Validate Phone Function:
function validatePhone(inputtxt) {
//+PP-PPPP-PPPP
//+PP.PPPP.PPPP
//+PP PPPP PPPP
var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(inputtxt.match(phoneno))
{
return true;
}
else
{
return false;
}
}
validatePhone is also using regex to text the phone number in three formats which are PP-PPPP-PPPP, PP.PPPP.PPPP, PP PPPP PPPP. If you want to add different phone format then you can add your regex in var phoneno.
function verifyEmptyFieldPhoneNumber(mobileInpNumber)
{
$(mobileInpNumber).blur(function(){
var phone = $(mobileInpNumber).val();
var getMobile = validatePhone(phone);
if(getMobile)
{
$(this).css('border','1px solid green');
}
else
{
$(this).css('border','1px solid red');
}
});
}
verifyEmptyFieldPhoneNumber function validate phone with the help of validatePhone function.
Validate Message Function:
function verifyEmptyFieldMessage(MessageID)
{
$(MessageID).blur(function(){
if($(this).val() == '')
{
$(this).css('border','1px solid red');
}
else
{
$(this).css('border','1px solid green');
}
});
}
verifyEmptyFieldName() , verifyEmptyFieldEmailAddress(), verifyEmptyFieldPhoneNumber() and verifyEmptyFieldMessage() functions are used in blur event. And they will put immediate after document.ready.
On Submit Form Validation:
$("#storeContactForm").click(function(){
if($("#name").val() == '')
{
$("#name").css('border','1px solid red');
return false;
}
if($("#email").val() == '')
{
$("#email").css('border','1px solid red');
return false;
}
if($("#email").val() != '')
{
var email = $("#email").val();
if (!validateEmail(email))
{
return false;
}
}
if($("#phone").val() == '')
{
$("#phone").css('border','1px solid red');
return false;
}
if($("#phone").val() != '')
{
var getMobile = validatePhone($("#phone").val());
if(!getMobile)
{
return false;
}
}
if($("#Message").val() == '')
{
$("#Message").css('border','1px solid red');
return false;
}
});
Above validation will perform when user hits the submit button. If any input field empty, or email or phone has wrong input value then above validation turn the border and form will not submit.
Jquery form validation example all together:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:verdana;
margin:0px;
}
.form-wrapper{
margin:10px;
}
.form-wrapper label{
display:block;
font-size:14px;
}
.form-wrapper input[type=text], .form-wrapper input[type=email]{
margin-bottom:5px;
width:180px;
height:20px;
border:1px solid #eeeeee;
}
.form-wrapper span{
color:#ee0000;
}
.form-wrapper input[type=submit]{
display:block;
margin-top:5px;
border:0px;
background:#ee0000;
color:#ffffff;
height:30px;
border-radius:5px;
}
.form-wrapper input[type=submit]:hover{
background:#ee0022;
}
.form-wrapper textarea{
border:1px solid #eeeeee;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}
h2{font-size:20px;}
</style>
</head>
<body>
<div class="form-wrapper">
<h2>jQuery Form validation example without plugin</h2>
<form name="contact-form" action="" method="post" id="contact-form">
<label>Name <span>*</span></label>
<input type="text" name="your_name" id="name">
<label>Email <span>*</span></label>
<input type="text" name="your_email" id="email">
<label>Phone <span>*</span></label>
<input type="text" name="your_phone" id="phone">
<label>Message <span>*</span></label>
<textarea name="Messages" cols="28" rows="5" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" id="storeContactForm">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function verifyEmptyFieldName(inputID)
{
$(inputID).blur(function(){
if($(this).val() == '')
{
$(this).css('border','1px solid red');
}
else
{
$(this).css('border','1px solid green');
}
});
}
//regex to validate User email Address
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
//jquery form validation for user email input using validateEmail Function
function verifyEmptyFieldEmailAddress(emailInputID)
{
$(emailInputID).blur(function(){
var email = $(emailInputID).val();
if (validateEmail(email))
{
$(this).css('border','1px solid green');
}
else
{
$(this).css('border','1px solid red');
}
});
}
// regex to validate phone
function validatePhone(inputtxt) {
//+PP-PPPP-PPPP
//+PP.PPPP.PPPP
//+PP PPPP PPPP
var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(inputtxt.match(phoneno))
{
return true;
}
else
{
return false;
}
}
// validation for phone input using validatePhone Function
function verifyEmptyFieldPhoneNumber(mobileInpNumber)
{
$(mobileInpNumber).blur(function(){
var phone = $(mobileInpNumber).val();
var getMobile = validatePhone(phone);
if(getMobile)
{
$(this).css('border','1px solid green');
}
else
{
$(this).css('border','1px solid red');
}
});
}
function verifyEmptyFieldMessage(MessageID)
{
$(MessageID).blur(function(){
if($(this).val() == '')
{
$(this).css('border','1px solid red');
}
else
{
$(this).css('border','1px solid green');
}
});
}
$(document).ready(function(){
//run time form validation
verifyEmptyFieldName("#name");
verifyEmptyFieldEmailAddress("#email");
verifyEmptyFieldPhoneNumber("#phone");
verifyEmptyFieldMessage("#Message");
//when click on submit
$("#storeContactForm").click(function(){
if($("#name").val() == '')
{
$("#name").css('border','1px solid red');
return false;
}
if($("#email").val() == '')
{
$("#email").css('border','1px solid red');
return false;
}
if($("#email").val() != '')
{
var email = $("#email").val();
if (!validateEmail(email))
{
return false;
}
}
if($("#phone").val() == '')
{
$("#phone").css('border','1px solid red');
return false;
}
if($("#phone").val() != '')
{
var getMobile = validatePhone($("#phone").val());
if(!getMobile)
{
return false;
}
}
if($("#Message").val() == '')
{
$("#Message").css('border','1px solid red');
return false;
}
});
});
</script>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about jquery form validation without plugin.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.