Hi All,
I am trying to amend this script, the form itself is written in HTML and what I need it to do is rather than it submit the form, I need it to simply show the errors shown in the SPANs… when I click the button it give me the error, however when I click it again it then submits the form… any ideas how to get round this, my code is shown below:
$(document).ready(function(){
$(".button").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/;
var formName = $("#name").val();
var formEmail = $("#email").val();
var formPhone = $("#telephone").val();
if(formName == '') {
$("#name").replaceWith('<span class="error"><input name="name" id="name" type="text" value="Contact name required"/></span>');
hasError = true;
}
if(formEmail == '') {
$("#email").replaceWith('<span class="error"><input name="email" id="email" type="email" value="E-mail missing"/></span>');
hasError = true;
}
if(formPhone == '') {
$("#telephone").replaceWith('<span class="error"><input name="telephone" id="telephone" type="tel" value="Telephone required"/></span>')
hasError = true;
}
if( !emailReg.test( formEmail ) ) {
$("#email").replaceWith('<span class="error"><input name="email" id="email" type="email" value="Invalid Email entered"/></span>');
hasError = true;
}
if(hasError == false) {
$.post("js/submitform.php",
{ contactname: formName,
email: formEmail,
telephone: formPhone,
referer: window.location.hostname
},
function(data){
$("#signup").animate({height: "50px"}, 600);
//$("#form").css('background-color','#FFF');
$("#signup").html("<p class='thanks'>Thanks! Your order has been sent, we will be in touch soon.</p>");
}
);
}
return false;
});
});
<form name="form" method="post" action="" onsubmit="return false;">
<input name="name" id="name" type="text" />
<input name="email" id="email" type="email" value="What's your email address?" onfocus="value=''"/>
<input name="telephone" id="telephone" type="tel" />
<a href="" name="submit" class="button">Sign Up</a>
<input type="hidden" name="type" id="type" value="launch"/>
</form>