Question

我正在创建一个Shopify网站，而我目前正在处理客户注册表单。我需要创建一个确认密码字段。有没有人知道如何在Shopify中这样做？

Answer 1

刚刚在我的注册页面上工作：

两个密码字段：

  <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
    }
});

密码不匹配消息的CSS：

.password-match {font-size: 12px; color: #f1152f; display:none;}

Answer 2

当客户收到激活链接时，系统会提示他们输入密码和密码确认。如果失败了 - 您可以添加额外的输入（密码确认），然后使用javascript进行简单的比较。类似的东西：

        .... <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" /> ....

然后使用jquery - 类似

$('form').submit(function(e) {
    e.preventDefault(); // stops our form from submitting
    if ( $('#password').val() === $('#password-confirm').val()) {
     $('form').submit();
    }
});

这是在我头顶完成的 - 所以没有经过测试。它应该比较两个密码字符串 - 如果它们匹配，则允许表单提交。当然 - 你可能想要做一些事情，如显示弹出...警告或消息说你的密码不匹配等。在这种情况下：

$('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!")
    }
});

你可以轻松做到

 $( ".errorMessage" ).fadeIn( "slow", function() {
    // Animation complete
      $(this).hide();
  });

而不是警告 - 但您需要确保您的div包含一个包含错误消息的.errorMessage类：）

如何在Shopify中进行确认密码字段？

2 个答案: