Manager

Back Back Up Advanced Editor

<section class="pad50">
            <div class="container">
                <div class="row">
                    <div class="section-title text-center">
                        <h3>Reset your password</h3>
                    </div>
                </div>
                <div class="col-md-8 col-md-offset-2">
                    <form id="contactForm" action="" class="contact-form" method="post" role="form">
                        <div class="messages"></div>
                        <div class="controls">
                            <div class="row">
                                <div class="col-md-12">
							             <div class="form-group">
	                                    	<label class="control-label" for="password"><?php _e("Password"); ?></label>
	                                        <input id="password" type="password" maxlength="32" name="password" class="form-control" placeholder="Password *" required="required" data-error="Password is required.">
	                                        <div class="help-block with-errors"></div><div id="divPassLen" style="color: #a94442;"></div>
	                                    </div>
	                                    <div class="form-group">
	                                    	<label class="control-label" for="c_password"><?php _e("Confirm Password"); ?></label>
	                                        <input id="c_password" type="password" maxlength="32" name="c_password" class="form-control" placeholder="Confirm Password *" data-error="Confirm Password is required.">
	                                        <div class="help-block with-errors"></div><div id="divCheckPasswordMatch" style="color: #a94442;"></div>
	                                    </div>
                                    <input type="submit" class="btn btn-primary mb30" value="Submit">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <p class="text-muted"><strong>*</strong> These fields are required.</p>
                                </div>
                            </div>
                        </div>

</form>
                    
                </div>
            </div>
        </section>
        
        
<script>
	$(document).ready(function(){
		
		$('#contactForm').validator();
		$("#c_password").keyup(checkPasswordMatch);
		$("#password").keyup(checkPasswordLength);
		
	});
	
	$('#contactForm').submit(function() {
		var pass = $("#password").val();
		var cpass = $("#c_password").val();
		var p_len = $("#password").val().length;
	    if (pass == cpass && p_len > 7) {
	    	return true;
	    }else{
	    	alert('Please Check your inputs!');
	    	return false;
		    }
	});

//http://jsfiddle.net/rpP4K/
	 //http://stackoverflow.com/questions/9717588/checking-password-match-while-typing
	 function checkPasswordMatch() {
		    var password = $("#password").val();
		    var confirmPassword = $("#c_password").val();

if (password != confirmPassword)
		        $("#divCheckPasswordMatch").html("Passwords do not match!");
		    else
		        $("#divCheckPasswordMatch").html("");
		}

function checkPasswordLength() {
		    var password = $("#password").val().length;
		    if (password < 8){
		        	$("#divPassLen").html("Password must be at least 8 characters long!");
		        }
		    else
		        $("#divPassLen").html("");
		}

</script>