I have a demo here - http://www.ttmt.org.uk/form/
It’s a simple bootstrap form with placeholders
I’m using simple jquery validation that checks if the fields are filled.
If not it will show an error message for each field.
It also checks if the email is correct and if the name field has a space.
I’m having to support ie8 + 9. Placeholders are supported there so I’m using jquery to make it work there.
In ie8 + 9 the validation doesn’t work, when all the fields are empty it only shows an error for the name and email fields.
Can anyone see why the validation dosen’t work in the phone number and postcode fields.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.wrap{
margin: 50px;
width: 600px;
}
.form-submitted{
display: none;
}
.form-group{
position: relative;
}
.form-error{
background: red;
border-radius: 6px;
color: white;
font-size: 1.1em;
height: 100%;
position: absolute;
padding: 14px 14px 0 0;
opacity: .6;
top: 0;
text-align: right;
left: 0;
width: 100%;
z-index: 100;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<form role="form" class="form">
<div class="form-group">
<input type="text" placeholder="name" class="form-control input-lg" id="form-name"/>
</div>
<div class="form-group">
<input type="text" placeholder="phone number" class="form-control input-lg" id="form-number"/>
</div>
<div class="form-group">
<input type="text" placeholder="email" class="form-control input-lg" id="form-email"/>
</div>
<div class="form-group">
<input type="text" placeholder="postcode" class="form-control input-lg" id="form-postcode"/>
</div>
<button class="send">Send</button>
</form>
<div class="form-submitted">
<p>Thank you</p>
</div>
</div>
<script src="modernizr.js"></script>
<script type="text/javascript">
$(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
$(document).ready(function(){
$('.send').click(function(e){
e.preventDefault();
if(verfiyFields()){
$('.form [type=text]').val('');
$('.form-submitted').css('display', 'block');
}
})
})
function verfiyFields() {
var flag = true;
var name = $('#form-name');
var number = $('#form-number');
var email = $('#form-email');
var postcode = $('#form-postcode');
if(name.val().indexOf(' ') === -1 ){
name.parent().prepend('<p class="form-error">Please enter name, including a space between first and last name</p>');
fadeOut();
flag = false;
}
if(number.val().length == 0){
number.parent().prepend('<p class="form-error">Please enter phone number</p>');
fadeOut();
flag = false;
}
if(!IsEmail(email.val())){
email.parent().prepend('<p class="form-error">Please enter valid email address</p>');
fadeOut();
flag = false;
}
if(postcode.val().length == 0){
postcode.parent().prepend('<p class="form-error">Please enter postcode</p>');
fadeOut();
flag = false;
}
return flag;
}
function fadeOut(){
$('.form-error').fadeOut(5000, function(){
$('.form-error').remove();
});
}
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
</script>
</body>
</html>