Shopify Question posted in
The Shopify help center can be found here.

how can i make sure the email and confirm email input match using html/java – Shopify

im new here so take it easy on me please.

currently on shopify form i have edited the registration so that it asks for email and then also a confirm email box. how can i make sure that both boxes are matching before customer submits the form, if not matching it want it to state "email address’s don’t match". I believe this would be through javascript but not sure.

this how my code looks for the 2 boxes.

    <div class="Form__Item">
      <input type="email" class="Form__Input" name="customer[email]" aria-label="{{ 'customer.register.email' | t }}" placeholder="{{ 'customer.register.email' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.email' | t }}</label>
    </div>

   <div class="Form__Item">
      <input type="email" class="Form__Input" name="customer[confirm_email]" aria-label="{{ 'customer.register.confirm_email' | t }}" placeholder="{{ 'customer.register.confirm_email' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.confirm_email' | t }}</label>
    </div>
  
    <div class="Form__Item">
      <input type="password" class="Form__Input" name="customer[password]" aria-label="{{ 'customer.register.password' | t }}" placeholder="{{ 'customer.register.password' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.password' | t }}</label>
    </div>
  
    
    <button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'customer.register.submit' | t }}</button>
  {%- endform -%}
</div>

thanks for any help in advance

Tags:

2

Answers


  1. 0

    with HTML5 you can check common validation on inputs like Required, minLenght, MaxLength,… even pattern for input data
    for this case you have to use javascript and better use JQuery
    example: 

    <input type="text" id="id1" />
<input type="text" id="id2" />

$('input').blur(function() {
if ($('#id1').attr('value') == $('#id2').attr('value')) {
alert('Same Value');
return false;
} else { return true; }
});
    Login or Signup to reply.
  2. 0

    You can simply compare the values of both input fields and verify if both fields have the same value.

    function validate(){
  let i1 = document.querySelector("#i1").value;
  let i2 = document.querySelector("#i2").value;
  if(i1 === i2){
    alert("Values matched");
  }else{
    alert("Values not matching");
  }

}
    <input type="text" id="i1">
<input type="text" id="i2">
<button onclick="validate()">Submit</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search