如何让我的形式JavaScript错误函数取消表单提交，并插入错误讯息？(How to get my

我一直在读realted在这里对堆栈溢出此事几个职位，并已阅读Javascript和HTML表单W3学校教程。

我创建一个XHTML与所需的字段形式，用户提交的个人资料（姓名，地址，电话）。我希望onsubmit属性每个输入值作为参数传递到我的外部JavaScript功能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>

窗体有一个外部JavaScript文件提交时调用。 /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 ;
}

我想website_form_error()函数取消表单提交和重定向回形式并插入一个消息放入<p id="frm_responder">当用户未填写在所有必需的字段。我website_form_error()函数还没有办法取消提交，并插入不触发的文本。我敢肯定有什么毛病我的JavaScript。任何答案？

Answer 1:

我认为你应该使用简单的按钮而不是提交按钮，在简单的按钮上的onclick事件添加一个自定义的方法，并使用提交（）在自定义的方法。

Answer 2:

挫折和阅读，研究，读了几天之后好了，reasearch我得取消而不事件传播到插入表单和错误消息。当用户完成所需的字段发送的形式。一个奋斗我是因为我对形式的复选框。复选框应该叫他们检查状态更容易验证的布尔document.getElementById("Agree").checked ，而不是它们的值，因为这成了一场噩梦试图解决。

我的外部JavaScript /web_frm_err.js 。这是因为简化为我能得到。每个参数Name,Phone,Email,Theme,Images,Agree被分配一个新的变量名(n , p , e , t , i , a)在功能参数。

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 ;
      }
}

我的XHTML形式：

<!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>

Answer 3:

一个onsubmit处理程序属性应该返回false以取消提交。尝试使用onsubmit="return website_form_error(...)" ，并返回一个false ，从website_form_error取消提交。

Answer 4:

您的脚本应该是这样的：

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;
   }

}

和你的HTML代码：

<!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>

文章来源: How to get my forms' Javascript error function to cancel form submission and insert error message?