"Custom HTML5 Validation Error Message"
Bootstrap 3.3.0 Snippet by detain

1
2
3
4
5
6
7
8
9
10
<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 ---------->
<form class="livedemo">
<input placeholder="Enter your email" id="two" required type="email" title="Please enter the valid email format (e.g. example@email.com)" x-moz-errormessage="Please enter the valid email format (e.g. example@email.com)" />
<button>submit</button>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.livedemo input {
margin: 10px;
border: 1px solid #aaa;
border-radius: 4px;
width: 220px;
padding: 3px;
}
.livedemo button {
border: 1px solid #aaa;
padding: 3px;
border-radius: 5px;
cursor: pointer;
}
:invalid {
border: 1px solid red;
}
:valid {
border: 1px solid green;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: