OnSubmit Javascript不会覆盖提交操作

时间:2013-06-05 03:28:51

标签: php javascript html javascript-events

我正在尝试使用webform构建一个网站。我正在使用godaddy的默认webform php,我不知道如何验证所需字段的表单。

我希望用户在验证之前无法提交表单。我发现其他用户在线提交的javascript文件解决了这个问题,但我似乎无法让它工作。

<script language="javascript" type="text/javascript">
function checkForm() {
    if (form.FirstName.value == "") {
        alert("Please enter your first name");
        form.FirstName.focus();
        return false;
    }

    if (form.LastName.value == "") {
        alert("Please enter your last name");
        form.LastName.focus();
        return false;
    }
    var email = form.email.value;
    if (email.indexOf('@') == -1) {
        alert("Plelase enter valid email");
        form.email.focus();
        return false;
    }
    return true;
}
</script>

以下是表格:

<form onsubmit="return checkForm()" action="/webformmailer.php" method="post"> 
<input type="hidden" name="subject" value="Submission" /> 
<input type="hidden" name="redirect" value="thankyou.html" />
<span>First Name:</span><br>
<input type="text" name="FirstName"/><br>
<span>Last Name:</span><br>
<input type="text" name="LastName" /><br>
<span>*Email:</span><br>
<input type="text" name="email" /><br>
<span>*Comments:</span><br>
<textarea name="comments" cols="40" rows="10">
</textarea><br>

<input type="submit" name="submit" value="submit"/> <span id ="required">*required field</span>
<input type="hidden" name="form_order" value="alpha"/> <input type="hidden" name="form_delivery" value="daily"/> <input type="hidden" name="form_format" value="html"/> 

我尝试提交但没有输入任何内容,它将我重定向到谢谢。

3 个答案:

答案 0 :(得分:3)

form未在函数中定义。有几种方法可以解决这个问题。最简单的方法是将return checkForm()更改为return checkForm(this)

function checkForm(form) {

答案 1 :(得分:0)

在表单中,将checkForm()更改为checkForm(this)。然后,在您的javascript中,将function checkForm() {更改为function checkForm(form) {

也许这会有所帮助。

答案 2 :(得分:0)

你忘记了两件事: 首先,请将 name =“form”添加到

<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post"> 

第二,你错误的关闭表格,请将此代码添加到HTML结尾

</form>

您的HTML将如下所示:

<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post"> 
    <input type="hidden" name="subject" value="Submission" /> 
    <input type="hidden" name="redirect" value="thankyou.html" />
    <span>First Name:</span><br>
    <input type="text" name="FirstName"/><br>
    <span>Last Name:</span><br>
    <input type="text" name="LastName" /><br>
    <span>*Email:</span><br>
    <input type="text" name="email" /><br>
    <span>*Comments:</span><br>
    <textarea name="comments" cols="40" rows="10"></textarea><br>
    <input type="submit" name="submit" value="submit"/> 
    <span id ="required">*required field</span>
    <input type="hidden" name="form_order" value="alpha"/> 
    <input type="hidden" name="form_delivery" value="daily"/> 
    <input type="hidden" name="form_format" value="html"/> 
</form>

另外一件事是在javascript中,检查电子邮件地址的功能是不正确的,正确的是:

var email = form.email.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

if (!email.match(re) || !email) {
  // incorrect email address
}

新脚本将是:

<script language="javascript" type="text/javascript">
function checkForm() {
    if (form.FirstName.value == "") {
        alert("Please enter your first name");
        form.FirstName.focus();
        return false;
    }

    if (form.LastName.value == "") {
        alert("Please enter your last name");
        form.LastName.focus();
        return false;
    }
    var email = form.email.value;
    var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

    if (!email.match(re) || !email) {
        alert("Plelase enter valid email");
        form.email.focus();
        return false;
    }
    return true;
}
</script>

古德勒克!