Fatal编程技术网
  • php/
  • 表单提交错误：Javascript验证和PHP提交

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

php javascript forms

表单提交错误：Javascript验证和PHP提交,php,javascript,forms,Php,Javascript,Forms,我正在编写一个表单，该表单将在Javascript中进行验证，然后，如果它是有效的，则继续进行PHP提交。PHP工作正常，如果输入无效，将不允许提交。但是，如果验证函数返回false，我无法在转到PHP页面之前停止表单。有人知道我能做些什么来完成这项工作吗 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

我正在编写一个表单，该表单将在Javascript中进行验证，然后，如果它是有效的，则继续进行PHP提交。PHP工作正常，如果输入无效，将不允许提交。但是，如果验证函数返回false，我无法在转到PHP页面之前停止表单。有人知道我能做些什么来完成这项工作吗

<!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文档：

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

    }

//JavaScript文档
函数检查表（）
{
formReset（）；
var误差=0；
//检查firstName是否有值
if（document.getElementById（“firstName”）.value==“”）
{
document.getElementById（“firstNameHTML”）.innerHTML=“请提供一个名字””；
错误++；
如果（错误==1）
{
document.getElementById（“firstName”）.focus（）；
}
}
//检查lastName是否有值
if（document.getElementById（“lastName”）.value==“”）
{
document.getElementById（“lastNameHTML”）.innerHTML=“请提供姓氏””；
错误++；
如果（错误==1）
{
document.getElementById（“lastName”）.focus（）；
}
}
//检查电子邮件是否有效
if（document.getElementById（“email”）.value==“document.getElementById（“email”）.value.search（“@”）<0）
{
document.getElementById（“emailHTML”）.innerHTML=“请提供有效的电子邮件地址””；
错误++；
如果（错误==1）
{
document.getElementById（“email”）.focus（）；
}
}
//支票利息有价值
if（document.getElementByName（“利息”）.value==“”）
{
document.getElementById（“InterestHTML”）.innterHTML=“请告诉我们您有什么兴趣与我们联系。”；
错误++；
}
//检查注释是否有价值
if（document.getElementById（“comment”）.value==“”）
{
错误++；
document.getElementById（“commentHTML”）.innerHTML=“请在此处提供您的问题或评论”
”；
如果（错误==1）
{
document.getElementById（“comment”）.focus（）；
}
}
如果（错误==0）
{
警报（“通过”）；
返回true；
}
警报（“失败”）；
返回false；
}
函数formReset（）{
document.getElementById（“firstNameHTML”）.innerHTML=“”；
document.getElementById（“lastNameHTML”）.innerHTML=“”；
document.getElementById（“emailHTML”）.innerHTML=“”；
警报（“重置”）；
}
函数formSub（）{
if（checkForm（））
{
警报（“检查为真”）；
document.getElementById（“联系人”）.submit（）；
返回true；
}
警告（“对不起，您的提交无法完成。”）；
返回false；
}
您应该执行以下操作：

onsubmit="return formSub();"
删除
javascript:

如果您的函数返回
false
，则不会提交表单。

您在
检查表单
函数上犯了错误
getElementsByName
返回元素数组。因此，为了检查是否所有代码都未选中，您必须用以下代码替换代码：

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

//检查利息是否有价值
var利息=document.getElementsByName（“利息”）；
var=true；
对于（变量i=0；i请告诉我们您有什么兴趣与我们联系。”；
错误++；
}
然后，您的函数将按照您的意愿工作。

如果您可以发布javascript函数，那么只有我们才能看到您的javascript函数，并可以帮助您将函数的代码
formSub
放在您的第一篇文章中好吗？这是文章中的最后一个函数。非常感谢！有了这个改变，它现在可以完美地工作了。