Magento 2 How can I validate the email confirmation field with the actual email field?

Question

I have added confirm email field in my contact form. Now I want to validate it. How can I validate this email confirmation field with the actual email field?

Answer 1

On the second reenter email address input your need to add a paremeter equalTo:'#email' to data-validate, Where email is your email address input field's id attribute value.

data-validate="{required:true, 'validate-email':true,equalTo:'#email'}"

Answer 2

You can add another Email field in your contact us form and add validation rules like below:

data-validate="{required:true, 'validate-email':true, equalTo:'#email'}"

<div class="field email required">
    <label class="label" for="confirm_email"><span><?php /* @escapeNotVerified */ echo __('Confirm Email') ?></span></label>
    <div class="control">
        <input name="confirm_email" id="confirm_email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true, equalTo:'#email'}"/>
    </div>
</div>

You can check other validation rules using the below link:

http://blog.i13websolution.com/magento-2-validation-rules/

Answer 3

The validators list in UI Components it can be found in

vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js

In your example you can use this:

validate-email

just add this tou your input tag .

data-validate="{required:true, 'validate-email':true}"

So your code can be like here:

    <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
    <div class="control">
        <input type="email" name="email-recheck" id="email-recheck" value="" title="<?php echo __('RE-Enter Email Address') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
    </div>