Well after days of frustration and reading, research, reading, reasearch I have got the form to cancel and error message to insert without event propagation. When the user completes the required fields the form is sent. One struggle I had was because I have a checkbox in the form. Checkboxes should be called for their checked state as a boolean for easier validation document.getElementById("Agree").checked
, not by their values as this became a nightmare trying to solve.
My external Javascript /web_frm_err.js
. This is as simplified as I could get. Each argument Name,Phone,Email,Theme,Images,Agree
gets assigned a new variable name (n , p , e , t , i , a)
in the function parameters.
function website_form_error(n , p , e , t , i , a)
{
var att = document.getElementById("err") ;
if ((n != "") && (p != "") && (e != "") && (t != "") && (i != "") && (a == true))
{
return true ;
}
else
{
att.innerHTML = "Form incomplete. You must complete all required (*) fields." ;
att.style.color = "Red" ;
return false ;
}
}
My XHTML form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script src="/web_frm_err.js" type="text/javascript"></script>
</head>
<body>
<form onsubmit="javascript:return website_form_error(document.getElementById('Name').value , document.getElementById('Phone').value , document.getElementById('Email').value , document.getElementById('Theme').value , document.getElementById('Images').value , document.getElementById('Agree').checked)" action="/webformmailer.php" method="post">
* Name <input type="text" id="Name" />
<br /> * Phone <input type="text" id="Phone" />
<br /> * Email <input type="text" id="Email" />
<br /> * Theme <input type="text" id="Theme" />
<br /> * Images <input type="text" id="Images" />
<br /> * Do you agree? <input type="checkbox" id="Agree" />
<p id="err"></p>
<br /><input type="submit" value="Send" />
</form>
</body>
</html>