Home/ Questions/Q 7845771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:21:22+00:00

I am working on a form that will be validated in Javascript and then,

  • 0

I am working on a form that will be validated in Javascript and then, if it is valid, proceed to a PHP submission. The PHP is working fine and will not allow a submission if the input isn’t valid. However, I can’t get the form to stop before going to the PHP page if the validation function returns as false. 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 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;

    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have made a mistake on checkForm function. getElementsByName returns an array of elements. 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.

    • 0