如何让我的表单的Javascript错误函数取消表单提交并插入错误信息？ [英] How to get my forms' Javascript error function to cancel form submission and insert error message?
问题描述
我一直在阅读Stack Overflow上的几篇关于这个问题的文章，并一直在阅读关于Javascript和HTML表单的W3学校教程。
我正在创建一个 XHTML 表格，并提供用户提交个人数据（姓名，地址，电话）的必填字段。我希望 onsubmit 属性将每个输入值作为参数传递给我的外部javascript函数 website_form_error（） $ b $ pre $ <！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.jstype =text / javascript>< / script>
< / head>
< body>
< p class =midid =frm_responder>& nbsp;< / p>
< p>
* Name< input class =normtype =textname =Name/>
*地址< input class =normtype =textname =Address/>
*电话< input class =normtype =textname =Phone/>
< / p>
< input type =submit/>
< / form>
< / body>
< / html>
表单提交时会调用外部JavaScript文件。 /web_frm_err.js
function website_form_error （姓名，地址，电话）
{
var =姓名，地址，电话，回复;
response =（姓名，地址，电话==未定义）
？
您的规格已发送至其他思维范式
：
表格不完整，您必须填写所有必填字段。 ;
document.getElementById（frm_responder）。innerHTML = response;
}
我想要 website_form_error（）函数取消表单提交并重定向回表单，并在用户未填写时将消息插入< p id =frm_responder> 所有的必填字段。
我的 website_form_error（）函数还没有办法取消提交，并且不会触发要插入的文本。我确定我的Javascript有问题。任何答案？
经过几天的挫折和阅读，研究，阅读，研究我得到了取消和错误的形式无需事件传播即可插入消息。当用户完成必填字段时，表单将被发送。我的一个挣扎是因为我在表单中有一个复选框。复选框应该被调用它们的检查状态作为一个布尔值，以便更容易验证 document.getElementById（Agree）。checked ，而不是通过它们的值，因为这成为了一个试图解决的噩梦。
我的外部Javascript /web_frm_err.js 。这尽可能简化，我可以得到。每个参数名称，电话，电子邮件，主题，图片，同意分配一个新变量名称（n，p，e，t，i，a ）在函数参数中。
function website_form_error（n，p，e，t，i， a）
{
var att = document.getElementById（err）; （（n！=）&（p！=）&&（e！=）&&（t！=）&& （i！=）&&（a == true））
{
return true;
}
else
{
att.innerHTML =表格不完整，必须填写所有需要的（*）字段。 ;
att.style.color =Red;
返回false;
我的XHTML表单：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd\">
< head>
< script src =/ web_frm_err.jstype =text / javascript>< / script>
< / head>
< body>
* Name< input type =textid =Name/>
< br /> *电话< input type =textid =Phone/>
< br /> *电子邮件< input type =textid =Email/>
< br /> * Theme< input type =textid =Theme/>
< br /> *图片< input type =textid =Images/>
< br /> * 你同意吗？ < input type =checkboxid =Agree/>
< p id =err>< / p>
< br />< input type =submitvalue =Send/>
< / form>
< / body>
< / html>
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"> </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?
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>
这篇关于如何让我的表单的Javascript错误函数取消表单提交并插入错误信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
