Now we’re talking.
So, let’s start with the form. I’m going to start by removing the inline stuff (CSS / event handlers):
<form name="coach_campaign" id="coach_campaign" action="signup.php" method="get" target="hidden_iframe">
<input type="hidden" name="catalogId" value="10051" />
<input type="text" id="emailAddress" name="emailAddress" maxlength="50" value="ENTER YOUR EMAIL" />
<input type="text" id="confirm_email" name="confirm_email" maxlength="50" value="CONFIRM YOUR EMAIL" />
<input type="hidden" name="langId" value="-1" />
<input type="hidden" name="mode" value="M7" />
<input type="hidden" name="marketingSource" value="FPENDSALE" />
<input type="hidden" name="requestPreferences" value="Y" />
<input type="hidden" name="storeId" value="10551" />
<input type="submit" value="SUBMIT" id="submit_email" />
</form>
Now, let’s get a reference to the form and its fields, then attach the submit handler unobtrusively:
var form = document.getElementById("coach_campaign"),
emailField = document.getElementById("emailAddress"),
confirmationField = document.getElementById("confirm_email");
form.addEventListener("submit", checkEmail, false);
Now we need to work out how to validate the fields and display the errors:
function checkEmail() {
var email = emailField.value,
confirmation = confirmationField.value;
if(checkEmpty(email)){
emailField.classList.add("invalid");
return false;
} else if(!checkValidEmail(email)){
emailField.classList.add("invalid");
emailField.value = "PLEASE ENTER VALID EMAIL ADDRESS";
return false;
} else if(email !== confirmation){
emailField.classList.add("invalid");
confirmationField.value = "EMAIL ADDRESS DO NOT MATCH";
return false;
}
}
Again, I’m using a class, rather than inline styles.
Now all we need to do is to add the requested focus/blur functionality:
emailField.addEventListener("focus", clearValue, false);
emailField.addEventListener("blur", setValue, false);
confirmationField.addEventListener("focus", clearValue, false);
confirmationField.addEventListener("blur", setValue, false);
and:
function clearValue(){
this.setAttribute("prev-value", this.value);
this.value = "";
}
function setValue(){
if (this.value === ""){
this.value = this.getAttribute("prev-value");
}
}
Here’s a complete demo.
This could probably be tightened up some more (as it is a little verbose), but for purposes of this demonstration I will leave it as it is.
I hope this helps.
