表单提交错误：JavaScript验证和PHP提交

Question

I am working on a form that will be validated in Javascript and then, if it is valid, proceed to a PHP submission. 我正在研究一种将使用Javascript进行验证的表单，然后，如果有效，则继续进行PHP提交。 The PHP is working fine and will not allow a submission if the input isn't valid. PHP工作正常，如果输入无效，则不允许提交。 However, I can't get the form to stop before going to the PHP page if the validation function returns as false. 但是，如果验证函数返回false，则无法在进入PHP页面之前停止表单。 Does anyone know what I can do to make this work? 有谁知道我能做些什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Form</title>
<script src="contact.js" type="text/javascript"> </script>
</head>
<body>
  <form name="contact"id="contact"  action="contact.php" onsubmit="return formSub();"method="post" >

    <h2 class="headingText"><em>What's your name?</em></h2>
    <p>
      <label for="firstName">First Name </label>
      <input type="text" name="firstName" id="firstName" tabindex="7">
      <span id="firstNameHTML" class="error"> </span>
    </p>
        <p>
      <label for="lastName">Last Name</label>
      <input type="text" name="lastName" id="lastName" tabindex="8">
      <span id="lastNameHTML" class="error"> </span>
    </p>
        <p>&nbsp;</p>
      <h2 class="headingText"><em>What's your preferred email address?</em></h2>
      <p>
      <label for="email">Email Address</label>
      <input type="text" name="email" id="email" tabindex="9">
        <span id="emailHTML" class="error"> </span>
</p>
      <p>&nbsp;</p>
      <h2 class="headingText"><em>What would you like to contact us about?</em><br><span id="interestHTML"></span>
      </h2>

    <p>
      <label>
        <input type="checkbox" name="Interest" value="training" id="Interest_training" tabindex="10">
        Training Services</label>
      <br>
      <label>
       <input type="checkbox"  name="Interest" value="testing" id="Interest_testing" tabindex="11">
        Testing Services</label>
      <br>
      <label>
        <input type="checkbox"  name="Interest" value="remediation" id="Interest_remediation" tabindex="12">
        Remediation Services</label>
      <br>
      <label>
        <input type="checkbox"  name="Interest" value="General Question" id="Interest_general" tabindex="13">
        General Question</label>
      <br>
      <label>
        <input type="checkbox"  name="Interest" value="error" id="Interest_error" tabindex="14">
        Report a Website Error</label>
      <br>
      <label>
        <input type="checkbox"  name="Interest" value="other" id="Interest_other" tabindex="15">
        Other</label>
</p>
<p>
      <label for="comment"><span class="headingText">Please enter your question or comments here. </span></label><br>
      <span id="commentHTML"></span>

        <textarea name="comment" id="comment" cols="45" rows="5" width="100px" tabindex="16"></textarea>
      </p>
      <input name="submit" type="submit" value="Submit the Form" tabindex="17">
      <input name="reset" type="reset" value="Reset the Form" tabindex="18">
  </form>
  <p>&nbsp;</p>
<p>&nbsp;</p>
</body></html>

Javascript Document: Javascript文件：

    // JavaScript Document
    function checkForm()
    {
        formReset();
        var error=0;


        //Check firstName has value
        if (document.getElementById("firstName").value=="")
        {
            document.getElementById("firstNameHTML").innerHTML="<strong> Please provide a first name</strong>";
            error++;

            if(error==1)
            {
                document.getElementById("firstName").focus();
            }
        }

        //Check lastName has value
        if (document.getElementById("lastName").value=="")
        {
            document.getElementById("lastNameHTML").innerHTML="<strong> Please provide a last name</strong>";

            error++;

            if(error==1)
            {
                document.getElementById("lastName").focus();
            }
        }


        //Check email is valid
        if (document.getElementById("email").value=="" || document.getElementById("email").value.search("@") < 0)
        {
            document.getElementById("emailHTML").innerHTML="<strong> Please provide a valid email address</strong>";
            error++;

            if(error==1)
            {
            document.getElementById("email").focus();
            }
        }

        //Check Interest has value
        if (document.getElementByName("Interest").value=="")
        {
            document.getElementById("InterestHTML").innterHTML="<strong> Please let us know what you are interested in contacting us about.</strong>";
            error++;
        }

        //Check Comment has value
        if (document.getElementById("comment").value=="")
        {
            error++;
            document.getElementById("commentHTML").innerHTML="<strong> Please provide your questions or comments here</strong><br>";

            if(error==1)
            {
                document.getElementById("comment").focus();
            }
        }


        if (error==0)
        {
            alert("Passed");
            return true;
        }


        alert("Failed");
        return false;

    }

    function formReset(){
        document.getElementById("firstNameHTML").innerHTML="";
        document.getElementById("lastNameHTML").innerHTML="";
        document.getElementById("emailHTML").innerHTML="";
        alert("Reset");             
    }

    function formSub(){


        if(checkForm())
        {
            alert("Check is True");
            document.getElementById("contact").submit();
            return true;
        }

            alert("I'm sorry, your submission cannot be completed.");
            return false;

    }

Answer 1

You should do: 你应该做：

onsubmit="return formSub();"

delete javascript: 删除javascript:

If your function returns false the form wont be submitted. 如果您的函数返回false则不会提交表单。

Answer 2

You have made a mistake on checkForm function. 您在checkForm函数上犯了一个错误。 getElementsByName returns an array of elements. getElementsByName返回元素数组。 So, in order to check if all of them are unchecked, you have to replace the code with this: 因此，为了检查是否所有选项都未选中，您必须用以下代码替换代码：

//Check Interest has value
var interests = document.getElementsByName("Interest");            
var noneChecked = true;

for(var i = 0; i < interests.length; i++) {
    if (interests[i].checked) { 
    noneChecked = false;
    }
}

if (noneChecked) {
    document.getElementById("interestHTML").innterHTML="<strong> Please let us know what you are interested in contacting us about.</strong>";
    error++;
}

Then your function will work as you wanted. 然后，您的功能将按需要工作。

表单提交错误：JavaScript验证和PHP提交

问题描述

2 个解决方案

解决方案1
1 2012-04-23 15:39:14

解决方案2
0 已采纳 2012-04-23 17:19:34

表单提交错误：JavaScript验证和PHP提交

问题描述

2 个解决方案

解决方案1 1 2012-04-23 15:39:14

解决方案2 0 已采纳 2012-04-23 17:19:34

解决方案1
1 2012-04-23 15:39:14

解决方案2
0 已采纳 2012-04-23 17:19:34