How to get my forms' Javascript error function to cancel form submission and insert error message?

Question

I have been reading several posts realted to this matter here on Stack Overflow and been reading the W3 Schools tutorials on Javascript and HTML forms.

I am creating an XHTML form with required fields for users to submit personal data (Name, Address, Phone). I want the onsubmit attribute to pass each input value as an argument to my external javascript function website_form_error().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <script src="http://othermindparadigm.com/web_frm_err.js" type="text/javascript"></script>
</head>
<body>

<p class="mid" id="frm_responder">&nbsp;</p>

<form action="/webformmailer.php" method="post" onsubmit="javascript:website_form_error(document.getElementById('Name').value,document.getElementById('Address').value,document.getElementById('Phone').value)">
   <p>
      * Name <input class="norm" type="text" name="Name"  />
      * Address <input class="norm" type="text" name="Address"  />
      * Phone <input class="norm" type="text" name="Phone"  />
   </p>

   <input type="submit"  />
</form>

</body>
</html>

The form has an external JavaScript file to be called when submitted. /web_frm_err.js

function website_form_error(Name,Address,Phone)
{
    var = Name,Address,Phone,response ;
    response = (Name,Address,Phone == undefined)
       ?
       "Your specifications have been sent to Other Mind Paradigm"
       :
       "Form incomplete. You must fill in all required fields." ;

    document.getElementById("frm_responder").innerHTML = response ;
}

I want the website_form_error() function to cancel the form submission and redirect back to the form and insert a message into <p id="frm_responder"> when the user has not filled in all of the required fields. My website_form_error() function does not yet have a way to cancel the submission and the text to be inserted does not trigger. I'm sure there is something wrong with my Javascript. Any answers?

I also tried removing `` and the user is redirected to the home pafge. — Xavier, Apr 08 '14 at 01:31

score 1 · Answer 1 · answered Apr 07 '14 at 07:29

1

I think you should use simple button instead of submit button, on the simple button add a custom method on the event of onclick and use submit() in that custom method.

answered Apr 07 '14 at 07:29

Naveed Yousaf

436
4
14

Xavier · Accepted Answer · 2014-04-11T16:34:18.123

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>

score 0 · Answer 3 · answered Apr 07 '14 at 06:05

0

An onsubmit handler attribute should return false to cancel the submission. Try using onsubmit="return website_form_error(...)" and returning a false from website_form_error to cancel the submission.

answered Apr 07 '14 at 06:05

guest

6,450
30
44

Do you mean to add the `onsubmit` attribute to the `
` tag or the `input` submit?
– Xavier Apr 08 '14 at 01:19
The `
` tag. It already has one. Add `return` before the function call.
– guest Apr 08 '14 at 06:10

score 0 · Answer 4 · answered Apr 07 '14 at 06:10

Your script should look like this:

function website_form_error(Name,Address,Phone)
{
var = Name,Address,Phone,response ;
response = (Name,Address,Phone == undefined)
document.getElementById("frm_responder").innerHTML = response ;
   if(!response){
     "Your specifications have been sent to Other Mind Paradigm";
     return true;
   }else{
     "Form incomplete. You must fill in all required fields." ;
      return false;
   }

}

And your HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <script src="http://othermindparadigm.com/web_frm_err.js" type="text/javascript"></script>
</head>
<body>

<p class="mid" id="frm_responder">&nbsp;</p>

<form action="/webformmailer.php" method="post" onsubmit="javascript:website_form_error(document.getElementById('Name').value,document.getElementById('Address').value,document.getElementById('Phone').value)">
   <p>
      * Name <input class="norm" type="text" name="Name"  />
      * Address <input class="norm" type="text" name="Address"  />
      * Phone <input class="norm" type="text" name="Phone"  />
   </p>

   <input type="submit"  onclick="return website_form_error()"/>
</form>

</body>
</html>

Thank you this makes a lot of sense and this is the way I want to go but, for some reason the form still gets sent regardless of the required fields not filled out and my webformmailer.php still redirects to my thankyou.html page. Been trying multiple ways with the script and still the same results. — Xavier, Apr 08 '14 at 00:35
Also tried removing the hidden input that redirects and the server redirects to my homepage. — Xavier, Apr 08 '14 at 00:51
I think your validation code does not work, check this http://jsfiddle.net/YCJz4/ when your code returns `false`, the submit won't redirect your page. I think your validation returns `true`. — Maysam, Apr 08 '14 at 04:50
I have finally got the results I am looking for thank you. My final answer is far from this as it has evolved but the principal is still vlose but with some tweeks. — Xavier, Apr 11 '14 at 15:55

How to get my forms' Javascript error function to cancel form submission and insert error message?

4 Answers4

Linked