I'm using bootstrap validator for the form validation.
If the value of input are just spaces it doesn't show errors even though input is required.
E.g name field in example gets validating when hitting space couple of times, twitter has a pattern so doesn't allow space-only values).
http://jsbin.com/roxasen/1/edit?html,js,output
it is working fine.
You have just forgotten to include bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" pattern="^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors">Hey look, this one has feedback icons!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-inline row">
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<div class="help-block">Minimum of 6 characters</div>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
</body>
</html>
Related
I want to know how to make the bootstrap custom validation also show the specific field where the form is not filled.
You can observe the normal form shows or goes to the specific field which is not filled when the form is submitted
where bootstrap custom validation doesn't do that.
This is the code with out bootstrap custom validation
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">#</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
This is the bootstrap validation
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>
If you remove novalidate="" from <form class="needs-validation was-validated" novalidate=""> you get the same result as without Bootstrap validation.
novalidate prevents the browser to validate the form so you can apply the custom behaviour of Bootstrap.
If you want to add scroll to id after the validation I suppose you have to do by yourself or check if there is such config in the library you are using.
I have updated the code by using some JavaScript code.
And it's working. :)
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
var invalidOptions = document.querySelectorAll(
".form-control:invalid");
invalidOptions.forEach(function(element) {
element.parentNode.childNodes.forEach(function(node) {
if (node.className == 'valid-feedback') {
node.className = 'invalid-feedback';
node.innerText =
'Please choose a Gender';
}
});
});
$('html, body').animate({
scrollTop: $(invalidOptions[0]).offset().top
}, 2000);
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>
fiddle: http://jsfiddle.net/a3f6ouqw/2/
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
Javascript code
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
and I'm always getting empty str. Any ideas?
add name in input and select
For a form element's value to be included in the serialized string, the element must have a name attribute.
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input name="dateControl" type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select name="selectpicker" class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="checkbox" type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.
These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.
Add name attributes on the HTML fields and your JS code will work fine.
There are 4 tabs and in that 4 tabs there are 4 forms, I want to write a jQuery program such that if I submit Form1 in tab1 then the tab2 containing form should be enabled and when I submit form2, tab3 containing form 3 should be enabled that goes on until I reach form4.
I wrote the code but it is enabling all tabs instead of next one.
I am a beginner in jQuery, please comment below for any query.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit',function() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>
Working fiddle.
You could check on submit if the current active tab is the last or not, if not move to the next tab using the .next() and .tab('show'):
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
I think that what you looking for :
$("#myTabs form").on('submit',function(e) {
e.preventDefault();
var li_count = $('.nav-tabs li').length;
var current_active = $('.nav-tabs li.active').index();
if(current_active<li_count){
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
}else{
alert('Last Step');
}
});
Hope this helps.
Here is another solution: Working fiddle
When you submit the form,you need to show next tab. For that, you should to identify current li ,then, set data-toggle="tab" for next li.
$("#myTabs form").on('submit',function(e) {
e.preventDefault();
var linkHref=$(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#'+linkHref+'"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle','tab');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit',function() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>
In the sample below I add some sample file, which is working fine but I need to do some modification on that. Currently while validating, it shows the error like this:
But what I need it to do is to show a tooltip. The tooltip needs to be auto pop and remain visible until the error is cleared. Like this:
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<span class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Many ways of doing this.
With pure CSS, leaving the DOM structure alone:
span.help-block.with-errors {
position: absolute;
top:45%;
right:36px;
z-index:1000;
}
Or, if you modify the DOM structure (moving the validation text into the .form-group):
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
You could inline a bit of CSS to get the position correct. Stack snippet follows.
If you want to do the tooltip-style thing, I'd suggest a jQuery plugin to handle this bit for you. One example is Tooltipster.
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I have a popup page loading on signin button click. The problem is when I keep pressing tabs, the focus is going out to the parent page. I want the focus to keep looping on the popup on tab press until it is closed
http://jsfiddle.net/2EXL5/
HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Css/bootstrap.min.css" rel="stylesheet" />
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.bpopup.min.js"></script>
<link href="Css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<img src="Css/Images/Logo.png" />
</div>
<div class="col-md-8 quickbuttons">
<button type="button" class="btn btn-link" tabindex="1" id="btnSignin"><span class="glyphicon glyphicon-user"></span> Sign in</button>
<button type="button" class="btn btn-link" tabindex="2"><span class="glyphicon glyphicon-info-sign"></span> Help</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 style="margin-top:50px;">Signup</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtFirstName">First Name</label>
<input type="text" name="First Name" value="" id="txtFirstName" class="form-control" placeholder="First Name" required="" tabindex="3" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLastName">Last Name</label>
<input type="text" name="Last Name" value="" id="txtLastName" class="form-control" placeholder="Last Name" required="" tabindex="4" />
</div>
<div class="form-group">
<label class="sr-only" for="txtEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="5" />
</div>
<div class="form-group">
<label class="sr-only" for="txtPassword">Password</label>
<input type="password" name="Password" value="" id="txtPassword" class="form-control" placeholder="Password" required="" tabindex="6" />
</div>
<button class="btn btn-primary pull-right" tabindex="7" id="btnSingUp"><span class="glyphicon glyphicon-plus"></span> Sign Up</button>
</form>
</div>
</div>
<div id="element_to_pop_up">
<a class="b-close">
X
<br />
</a>
<h3>Login</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtLoginEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtLoginEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="1" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLoginPassword">Password</label>
<input type="password" name="Password" value="" id="txtLoginPassword" class="form-control" placeholder="Password" required="" tabindex="2" />
</div>
<button class="btn btn-primary pull-right" tabindex="3"><span class="glyphicon glyphicon-off"></span> Sign In</button>
</form>
</div>
</div>
<script>
$("#btnSignin").click(function () {
$('#element_to_pop_up').bPopup();
});
</script>
</body>
</html>
You can capture the focusOut event of the last focusable item in the popup and when that happens just send the focus to the first focusable element in your pop-up.
You can see it working in this JSfiddle (needs setting tabindexes right).
I added an ID to the button to find it easily and then just add this to the click function:
$('#signin-button').focusout(function() {$(this).closest('form').find('input').first().focus();});