"Bootstrap Javascript Form Validation"
Bootstrap 3.3.0 Snippet by webenlance

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Webenlance's javascript form validation for bootstrap</h2>
<p>Please Hit like if you love this</p>
<a href="webenlance.com" target="blank">Webenlance</a>
</div>
</div>
<form class="form-horizontal simple-validation" id="frmExample" novalidate>
<div class="form-group required">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter your name" data-title="Please enter your name">
</div>
</div>
<div class="form-group required">
<label for="emailaddress" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="emailaddress" placeholder="Enter email" data-title="Please enter a valid Email">
</div>
</div>
<div class="form-group required">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="age" placeholder="Enter your age" data-title="Age required - Only numeric values allowed">
</div>
</div>
<div class="form-group required">
<label for="income" class="col-sm-2 control-label">Income</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
.required label,
label.required{
font-weight:bold;
}
.required label:before,
label.required:before{
color:#c00;
content:"* ";
}
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
var Validate = {
'date': function(value){
return !(/Invalid|NaN/).test(new Date(value));
},
'dateTime': function(value){
return !(/Invalid|NaN/).test(new Date(value));
},
'email': function(value){
return (/^[_a-zA-Z0-9\-]+((\.[_a-zA-Z0-9\-]+)*|(\+[_a-zA-Z0-9\-]+)*)*@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*(\.[a-zA-Z]{2,4})$/i).test(value);
},
'float': function(value){
return (/^[\-+]?[0-9]*\.?[0-9]+$/).test(value);
},
'integer': function (value){
return (/^\d+$/).test(value);
},
'slug': function(value){
// at least 3 alpha numerics no spaces and no periods
return (/[\w]{3,}[\-]?$/).test(value) && !(/\s/).test(value) && !(/\./).test(value);
}
};
// !FormButtons
/**
* @hint Global FormButtons object which defines the class or id used by the submit and processing button holders
*/
var FormButtons = {
"process" : "frmPrc",
"submit" : "frmBtn"
};
/**
* @hint Pass in a form and bind the submit event to the validation process (validateForm)
*/
function simpleValidation(form,doAlert){
if (form === undefined)
return false;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
login-form
Login Form
Contact Form

Questions / Comments: