How do I "lock" or "disable" the form button when the error message appears?
Input
<input style="height:24px;" name="email" id="email" title="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('contacts')->__('Email')) ?>" class="input-text required-entry validate-email" autocapitalize="off" autocorrect="off" spellcheck="false" />
<p style="color: #ee001c" id="para" name="para" class="ok"></p>
jQuery
$j(document).ready(function() {
$j("#email").focus(function() {}).blur(function() {
$j("contactForm").submit(function () { return false; });
//atribuindo o valor do campo
var sEmail = $j("#email").val();
// filtros
var emailFilter=/^.+@.+\..{2,}$/;
var illegalChars= /[\(\)\<\>\,\;\:\\/\"\[\]]/
// condição
if(!(emailFilter.test(sEmail))||sEmail.match(illegalChars)){
$j("#para").show().removeClass("ok").addClass("erro")
.text('Informe um endereço de email válido. Por exemplo, [email protected].');
}else{
}
});
$j('#email').focus(function(){
$j("#para").hide();
});
});
Solution
function validateEmail(email) {
var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$j("#para").text("");
var email = $j("#email").val();
if (validateEmail(email)) {
return true;
} else {
$j("#para").text("Informe um endereço de email válido. Por exemplo, [email protected].");
return false;
}
}
$j(".validate").bind("blur", validate);
$j("#validate").bind("click", validate);