Hi everyone,
We've started using this HTML below to block email domains from submissions, and it works great.
The issue I'm finding is that when someone enters an invalid email and they hit submit, and the error message pops up, when they go back to enter a valid email the error message bubble is blocking the submit button.
Does anyone have any ideas on how to remedy this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var $jQ = jQuery.noConflict();
var invalidDomains =
[
"hotmail.com",
"yahoo.com",
"aol.com",
"gmail.com",
"msn.com",
"comcast.net",
];
$jQ(document).ready(function(){
if ($jQ('.mktoButtonRow').length == 0) {
window.setTimeout(function(){
emailValidation();
}, 500);
} else {
emailValidation();
}
});
$jQ('#Email').bind('blur', function(){
if (isEmailValid()){
var $error = $jQ(this).parent().find('.mktoError');
if ($error.length > 0) {
$error.fadeOut(200, function(){
$error.remove();
$jQ('#Email').removeClass('mktoInvalid');
});
}
}
});
function emailValidation() {
var $buttonRow = $jQ('.mktoButtonRow');
var submitText = $buttonRow.find('button').html();
var $replacement = $jQ('<input id="replacementButton" type="button" class="mktoButton" value="' + submitText + '" />');
$buttonRow.hide();
var buttonRowContents = $buttonRow.html();
$span = $jQ(buttonRowContents).html('');
var $replacementRow = $jQ('<div class="mktoFormRow" />').append($span.append($replacement));
$jQ('.mktoFormRow :last').after($replacementRow);
$jQ('#replacementButton').click(function(){
console.log('debug1');
if (!isEmailValid()) {
console.log('debug2');
var $error = $jQ('#Email').parent().find('.mktoError');
if ($error.length == 0) {
$error = getError('Please provide a corporate email address');
$jQ('#Email').after($error);
}
$error.fadeIn(200);
$jQ('#Email').removeClass('mktoInvalid').addClass('mktoInvalid');
return;
} else {
console.log('debug3');
$jQ('.mktoButtonRow button').trigger('click');
}
});
}
function isEmailValid() {
var email = $jQ('#Email').val().toLowerCase();
for(i=0; i < invalidDomains.length; i++) {
var invalidDomain = invalidDomains[i].toLowerCase();
if (email.indexOf(invalidDomain) !== -1) {
return false;
}
}
return true;
}
function getError(message, detail) {
var $container = $jQ('<div class="mktoError" style="right: 0px; bottom: -47px; display: none" />');
var $arrow = $jQ('<div class="mktoErrorArrowWrap"><div class="mktoErrorArrow"></div></div>');
var $errorMessage = $jQ('<div class="mktoErrorMsg" />').html(message);
if (typeof detail == 'string' && $jQ.trim(detail) != '') {
$errorMessage = $errorMessage.append($jQ('<span class="mktoErrorDetail" />').html(detail))
}
return $container.append($arrow).append($errorMessage);
}
</script>