"jquery form validation"
Bootstrap 4.1.1 Snippet by sumi9xm

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="form-type-one">
<div class="container">
<div class="row ">
<div class="col-md-6 col-md-offset-3">
<div class="form-warp">
<div class="form-card">
<div class="form">
<div class="form-content">
<!-- <img class=" text-center" src="images/form-img/Sign-Up.jpg">
<h3>Sign Up To Create A Quest For Your Business</h3>
<p>Align and improve performance your team through Objectives and Key Results(OKRs)</p> -->
<form action="/action_page.php">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" name="name" class="form-control my-input" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" >
</div>
<div class="form-group">
<label for="Zip Code">Zip Code:</label>
<input type="Zip Code" class="form-control" id="zipCode" name="" placeholder="Zip Code">
</div>
<div class="form-group" ng-controller="PasswordController" ng-app="myapp">
<label for="pwd">Password:</label>
<input class="form-control" id="password" name="password" placeholder="Password" ng-model="password" ng-change="analyze(password)">
<div ng-style="passwordStrength"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*//////////////////////FORM TYPE ONE//////////////////////*/
.error{
color:red;
}
.error2{
color:green;
}
.form-type-one{
padding: 80px 0px;
background-color: #fafbf6;
position:relative;
}
.form-type-one .form-warp{
padding-right: 80px;
padding-left: 80px;
}
.form-type-one .form-card{
background-color: #fff;
border-radius: 20px;
padding-top: 15px;
-webkit-box-shadow: 2px 22px 63px -17px rgba(24,139,240,0.62);
-moz-box-shadow: 2px 22px 63px -17px rgba(24,139,240,0.62);
box-shadow: 2px 22px 63px -17px rgba(24,139,240,0.62);
}
.form-type-one .form{
padding-left: 15px;
padding-right: 15px;
}
.form-type-one .form img{
text-align: center;
margin-left: auto;
display: block;
margin-right: auto;
}
.form-type-one .form-control {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//FORM VALIDATION/////////////////////////////////////////////
$(document).ready(function(){
$("#btnSubmit").click(function() {
$(".error").remove();
var name = $("#name").val();
var email = $("#email").val();
var zipCode = $("#zipCode").val();
var zipCodePattern = /^\d{6}$/ ;
var password = $("#password").val();
var emailReg = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm;
var strongPassword = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
var mediumPassword = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
var emailblockReg = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;
var emailIndex = email.indexOf("@");
var emailBlock = email.substr(emailIndex);
if (name == ""){
$("#name").after('<span class="error">Please enter your name.</span>');
}
if(email == ""){
$("#email").after('<span class="error">Please enter your Email ID</span>');
}
if(email != "" && !emailReg.test(email)){
$("#email").after('<span class="error">Please Enter a Valid Email ID</span>');
}
if(email != "" && !emailReg.test(email) && emailBlock == "@gmail.com" || emailBlock == "@yahoo.com" || emailBlock == "@hotmail.com"){
$("#email").after('<span class="error">No yahoo, gmail or hotmail emails.</span>');
}
if(zipCode == ""){
$("#zipCode").after('<span class="error">Please enter your Zip code</span>');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO
login-form
Login Form
Contact Form

Questions / Comments: