0

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;

    }
4

2 に答える 2

1

やったほうがいい：

onsubmit="return formSub();"

消去javascript:

関数が返された場合false、フォームは送信されません。

于 2012-04-23T15:39:14.063 に答える
0

関数を間違えましたcheckForm。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++;
}

その後、関数は希望どおりに機能します。

于 2012-04-23T17:19:34.093 に答える