How to make Confirm Password field in Shopify? - forms

Question

I'm creating a Shopify website, and I'm currently working on the customer registration form. I need to make a Confirm Password field. Does anybody know how to do this in Shopify?

Answer 1

Just Got it working on my register page:
The two password fields:
<div id="create_password_container">
<label for="password">Your Password<em>*</em></label>
<input type="password" value="" name="customer[password]" id="create_password" {% if form.errors contains "password" %} class="error"{% endif %}>
</div>
<div id="password_confirm_container">
<label for="password_confirmation">Password Confirmation</label> <span class="password-match">PASSWORDS DO NOT MATCH</span>
<input type="password" value="" name="customer[password_confirmation]" id="password_confirm" />
</div>
Javascript:
$('form#create_customer').submit(function(e) {
if ( $('#create_password').val() === $('#password_confirm').val()) {
//alert('Password Good!!');
} else {
$('.password-match').fadeIn("slow");
e.preventDefault(); // stops our form from submitting
}
});
The CSS for the password not-matching message:
.password-match {font-size: 12px; color: #f1152f; display:none;}

Answer 2

When customers receive the link to their activation they are prompted for both a password and a password confirmation. Failing that - you can add an extra input (password confirmation) and then do a simple comparison with javascript. Something like:
.... <label for="password" class="login">{{ 'customer.register.password' | t }}</label>
<input type="password" value="" name="customer[password]" id="password" class="large password" size="30" />
<label for="password-confirm" class="login">{{ 'customer.register.password' | t }}</label>
<input type="password" value="" name="customer[password-confirm]" id="password-confirm" class="large password" size="30" /> ....
and then with jquery - something like
$('form').submit(function(e) {
e.preventDefault(); // stops our form from submitting
if ( $('#password').val() === $('#password-confirm').val()) {
$('form').submit();
}
});
That was done off the top of my head - so not tested. It should compare the two password strings - and if they match, allow the form to submit. Of course - you'll probably want to do stuff like show a pop up... alert or message to say your passwords don't match etc. In which case:
$('form').submit(function(e) {
e.preventDefault(); // stops our form from submitting
if ( $('#password').val() === $('#password-confirm').val()) {
$('form').submit();
} else {
// put your validation message in here - this could be showing an element... or showing an alert etc
alert("Your passwords don't match dummy!")
}
});
You could just as easily do
$( ".errorMessage" ).fadeIn( "slow", function() {
// Animation complete
$(this).hide();
});
instead of the alert - but you'd need to make sure you have a div with a class of .errorMessage that contains your error message :)