$(function(){
//add custom validator for jquery validator
jQuery.validator.addMethod('passwordMatch', function(value, element) {
// The two password inputs
var password = $("#user_password").val();
var confirmPassword = $("#user_password_confirmation").val();
// Check for equality with the password inputs
if (password != confirmPassword ) {
return false;
} else {
return true;
}
}, "Your Passwords Must Match");
$("#signup").validate({
errorClass:'error',
errorPlacement:function(error,element){
element.parent().prev().html(error);
},
success: function(label) {
label.parent().next().find('button.success').show();
label.parent().next().find('button.fail').hide();
label.parent().html(get_string_from_for(label.attr('for')));
console.log(label.parent().next());
},
highlight: function(element, errorClass) {
$(element).prev().show();
},
rules: {
'user[username]': "required",
'user[email]': "required",
'user[password]': {
required:true,
minlength:9
},
'user[password_confirmation]': {
required:true,
passwordMatch:true
}
},
messages:{
'user[username]':{
required:'You have to enter something here'
},
'user[email]':{
required:'Purr, you have to enter something here',
email:'Are you sure this is your email?'
},
'user[password]': {
required:'You have to enter something here',
minlength: "Your password is not long enough. Please enter at least 9 characters"
},
'user[password_confirmation]': {
required:'You have to enter something here',
passwordMatch: "Your password aren't matching" // custom message for mismatched passwords
}
}
});//end of validate()
$('#user_name').on('change',function(){
$('#signup').validate();
console.log('here');
});
function get_string_from_for(for_text){
switch(for_text) {
case 'user_name':
return 'username';
break;
case 'user_email':
return 'email'
break;
case 'user_password':
return 'password'
break;
case 'user_password_confirmation':
return 'password confirmation';
break;
default:
return '';
}
}
});
<button class="flat" data-toggle="modal" data-target="#myModal"> Sign Up</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel" style="color:#9a9a9a;font-family:Mailpile-Normal;">Sign Up</h4>
</div>
<div class="modal-body" style="text-align:left;">
<form role="form" id="signup" action="/users" method="post">
<div class ="form-group">
<p class="text-muted">username</p>
<div class="right-inner-addon ">
<button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
<input size="35" id="user_name" name="user[username]" type="text" class="form-control"placeholder="choose a cool name" />
</div>
</div>
<div class ="form-group">
<p class="text-muted">email</p>
<div class="right-inner-addon ">
<button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
<input size="35" id="user_email" name="user[email]" type="email" class="form-control"placeholder="[email protected]" />
</div>
</div>
<div class ="form-group">
<p class="text-muted">password</p>
<div class="right-inner-addon ">
<button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
<input size="35" id="user_password" name="user[password]" type="password" class="form-control"placeholder="at least 6 characters" />
</div>
</div>
<div class ="form-group">
<p class="text-muted">password confirmation</p>
<div class="right-inner-addon ">
<button style="display:none" class="success btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
<button style="display:none" class="fail btn btn-warning"><span class="glyphicon glyphicon-flash"></span></button>
<input size="35" id="user_password_confirmation" name="user[password_confirmation]" type="password" class="form-control"placeholder="" />
</div>
</div>
<button class="btn btn-default create">CREATE MY ACCOUNT</button>
</form>
</div><!--end of modal body-->
</div><!--end of modal content-->
</div><!--end of model dialog-->
</div><!--end of moal-->
.modal-dialog {
width: 400px;
}
.modal-content {
width: 400px;
}
.modal-body{
padding-left: 50px;
padding-right:50px;
}
button{
display: inline-block;
margin:0 5px 0 0;
padding:15px 30px;
font-size: 24px;
line-height: 0.9;
appearance:none;
box-shadow: none;
border-radius: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
button.flat{
color:#fff;
background-color: #00d3a3;
text-shadow:-1px 1px #417cb8;
border: none;
}
button.flat:hover{
background-color: #00b180;
text-shadow:-1px 1px #27496d;
}
button.flat:active{
background-color: #00b180;
text-shadow:-1px 1px #193047;
}
#email{
width:340px;
height:40px;
}
.inline-actions{
position: absolute;
right: 0;
bottom: 20px;
z-index: 1;
overflow: hidden;
}
.check-icn{
background: url(../assets/icons/checkmark-sm.png) center center no-repeat;
width:34px;
height:34px;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon button {
position: absolute;
right: -5px;
pointer-events: none;
}
#search{
}
button.success,button.create{
background-color: #00d3a3;
}
button.fail{
background-color: #ffc000;
}
button.create{
background-color: #00d3a3;
color:#fff;
}
button.create:hover, button.create:active{
background-color: #00b180;
color:#fff;
}
input[type="text"], input[type="email"],input[type="password"]{
background-color : #f7f7f7;
outline: none;
border: 2px solid #e7e7e7 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type="text"]:focus, input[type="email"]:focus,input[type="password"]:focus{
background-color : #e7e7e7;
outline: none;
border: 2px solid #e7e7e7 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
External resources loaded into this fiddle: