Custom Login Form with Validation

I’m not a designer and lack that creative spark, so I get excited when I see new, unusual designs like this login form:

This was created by Hugo Giraudel at Codrops and the use of icons and round button caught my eye.  In my example I’ve souped it up a bit with validation:

As you click on each field to supply the missing information, the corresponding validation box disappears.  There is no additional HTML markup.  Here is the CSS:

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
div.error{
font-size: 12px;
color: red;
font-weight: bold;
position:absolute;
left: 175px;
top:0px;
width: 250px;
height: 40px;
z-index: 999;
padding: 10px;

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: white; /* Fallback */
background: -moz-linear-gradient(#eeefef, #ffffff 10%);
background: -ms-linear-gradient(#eeefef, #ffffff 10%);
background: -o-linear-gradient(#eeefef, #ffffff 10%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
background: linear-gradient(#eeefef, #ffffff 10%);
}
.error p{margin-left: 40px;}
.error span {
/* Size and position */
width: 30px;
height: 30px;
float: left
}
i{color:#42A2BC;}

The jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function() {
$('#form-1').on('submit',function(e){
e.preventDefault();
//Check that each field is not empty
$('input').each(function(){
if($(this).val() == ""){
$(this).before('<div class="error"><span><i class="icon-arrow-left icon-large"></i></span><p>'+$(this).attr('placeholder') +' required</p></div>');
}
});

//If no error messages, send
if($('.error').size() == 0){
alert('Submitted');
$('#form-1').submit(function(){
//Some submission stuff here
});
}
});

$('input').on('focusin',function(){
$(this).prev('div').remove();
});

});

All we are doing here is adding a <div> with the error message if a field is empty, then removing it when the appropriate field gets clicked on.  We don’t need any more sophisticated validation for this form, but checking for valid email or other validations would be pretty easy to integrate.

The post Custom Login Form with Validation appeared first on Sophrosyne Life.

Follow me

Submit a Comment