How to get my forms' Javascript error function

2019-08-03 07:48发布

站内问答 / JavaScript
1709 4 5

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?

4条回答
霸刀☆藐视天下
2楼-- · 2019-08-03 08:10

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>
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-08-03 08:27

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.

查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-08-03 08:28

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.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
5楼-- · 2019-08-03 08:31

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)