I am trying to implement a feature in my Codeception scenario where I want to validate a form submission with user errors, such as confirming a wrong email address, and display a custom tooltip message in the browser.
HTML
<form ... >
<label>Email *</label>
<p>
<input type="email" name="email" id="email placeholder="Please insert your email" required="1" autocomplete="off" />
<input type="email" name="email_r" id="email_r" placeholder="Please confirm your email" required="1" autocomplete="off" />
</p>
</form>
JS
MyPlugin.checkMatch = function (idInputReferring, idInputRepeat){
var inputReferring = document.getElementById( idInputReferring );
var inputRepeat = document.getElementById( idInputRepeat );
if (inputReferring.value !== inputRepeat.value) {
inputRepeat.setCustomValidity( "It must match the previous input" );
inputRepeat.checkValidity();
setTimeout(function() {
inputRepeat.reportValidity();
}, 1);
} else {
inputRepeat.setCustomValidity('');
inputRepeat.checkValidity();
}
};
How can I achieve this functionality?