表单验证错误...显示错误，但在错误框上单击确定，触发表单提交...

Question

我正在尝试在我的网站租赁表格上添加表格验证/错误消息。我不确定这里出了什么问题。当我单击提交（如果表单为空白）时，错误框会显示并说出错误，但是，一旦您在此错误框上单击确定，它就会提交表单并加载感谢页面。函数中的 'return false' 似乎不起作用。我试图在您单击“确定”时关闭错误框，然后 return 到未发送的表单以修复/填写缺少的字段。

这是一个非常大的表格，所以我只显示关键区域以供审核... 非常感谢大家的帮助！

<script type="text/javascript">

函数 checkforblank() {

var errormessage = "";

if (document.getElementById('Full Name').value == "") {
    errormessage += "Please enter your Full Name \n";
    }

if (document.getElementById('Address').value == "") {
    errormessage += "Please enter your Address \n";
    }

if (document.getElementById('Home Phone').value == "") {
    errormessage += "Please enter your Home Phone Number \n";
    }

if (document.getElementById('EventPhone').value == "") {
    errormessage += "Please enter your Event Phone Number \n";
    }

if (document.getElementById('Email Address').value == "") {
    errormessage += "Please enter your Email Address \n";
    }

if (document.getElementById('Number').value == "") {
    errormessage += "Please enter your Card Number \n";
    }

if (document.getElementById('NumberB').value == "") {
    errormessage += "Please enter your Card Number \n";
    }

if (document.getElementById('NumberC').value == "") {
    errormessage += "Please enter your Card Number \n";
    }

if (document.getElementById('NumberD').value == "") {
    errormessage += "Please enter your Card Number \n";
    }

if (document.getElementById('ExpMonth').value == "") {
    errormessage += "Please enter your Cards Exp Date MMYY \n";
    }

if (document.getElementById('ExpYear').value == "") {
    errormessage += "Please enter your Cards Billing Zip \n";
    }

if (document.getElementById('Accept Rental Agreement').value == "") {
    errormessage += "Please type ACCEPT in the box \n";
    }   

if (errormessage != "") {
    alert(errormessage); 
    return false;
    }else return true;                                          
}

这是提交按钮中使用的代码：

 <input type=submit onclick="checkforblank();" value='RESERVE NOW' style="font-family: Arial" class="style106">

这是表格的起始代码：

 <form onsubmit="return checkforblank();" method="post" action="http://jumpnplayparty.com/ftools/process.php"  language="JavaScript" name="FrontPage_Form1">

我正在学习...抱歉，如果代码混乱 :p 搜索了有关此主题的几篇文章/几个 youtube 视频，但在修改表格 10 多个小时后仍然没有运气...请帮助

在此处查看完整表格：https://ink.mysitehosted.com/~bounce/MAMoonwalkRentals/Mobile/reserve_mobile_form.htm

感谢您的帮助！

Answer 1

您的脚本中存在语法错误，f.e。在你的函数 FrontPage_Form1_Validator 中，行

if (theForm.Full Name.value == "")

是错误的——你不能简单地在那个表达式中有一个 space 字符，这会使它无效。

如果您的表单元素名称中有 spaces，那么您必须使用以下语法来解决它们：theForm["Full Name"].value – 这是您可以访问包含 [= 的属性的唯一方法20=]s 在 JS 中的名称。

表单验证错误...显示错误，但在错误框上单击确定，触发表单提交...

Form validation error... error displayed, but clicking OK on error box, triggers form submit...

html

javascript

validation