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
2
Answers
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:
You can simply compare the values of both input fields and verify if both fields have the same value.