Error in Form submission: Javascript validation and PHP submission

Question

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;

    }

If you can post your javascript function then only we will be able to see your javascript function and could help you — Ravinder Singh
– Ravinder Singh, Commented Apr 23, 2012 at 16:22

MatuDuke · Accepted Answer · 2012-04-23 15:39:14Z

1

You should do:

onsubmit="return formSub();"

delete javascript:

If your function returns false the form wont be submitted.

answered Apr 23, 2012 at 15:39

MatuDuke

5,0081 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MatuDuke Over a year ago

Could you put the code of your function formSub on your initial post?

fourleaf Over a year ago

It's the last function in the post.

MatuDuke · Accepted Answer · 2012-04-23 17:19:34Z

0

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.

answered Apr 23, 2012 at 17:19

MatuDuke

5,0081 gold badge25 silver badges28 bronze badges

1 Comment

fourleaf Over a year ago

Thank you very much! With that change, it now works perfectly.

Collectives™ on Stack Overflow

Error in Form submission: Javascript validation and PHP submission

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related