PHP JavaScript Validation Error

Question

I thought I had this problems solved, but my issue is still happening.

Every time I click send, my form still sends. I thought I had my JavaScript correctly validating the form, but it's not working because I can put anything in the email fields, and it still processes. The alerts still work. I just want to use PHP and JavaScript, no AJAX or anything. Here is my code:

<?php

$to = '[email protected]';
$subject = 'Voice4Autism Inquiry';

$FirstName = $_POST['fname'];
$LastName = $_POST['lname'];
$eMail = $_POST['email'];

$message = <<<EMAIL

Hi!<br /><br/>

My name is $FirstName $LastName.  I am interseted in your newsletter from Voice4Autism.  Please add $eMail to your listserve.<br /><br />

Thank you,<br />
$FirstName $LastName

EMAIL;

$header = "From: $eMail\r\n";
$header = "Content-type: text/html\r\n";

if($_POST){
    mail($to, $subject, $message, $header);
}
?>

JAVASCRIPT

<script type="text/javascript">
function checkforblank() {
    var errormessage = "";

    if (document.getElementById('fname').value ==""){
        errormessage += "enter your first name \n";
    }
    if (document.getElementById('lname').value ==""){
        errormessage += "enter your last name \n";
    }
    if (document.getElementById('email').value ==""){
        errormessage += "enter your email \n";
    }
    if (document.getElementById('confirmEmail').value ==""){
        errormessage += "confirm your email \n";
    }

    if (errormessage != ""){
        alert(errormessage);
        return false;
    } else return true;
}

function verifyEmail() {
    var status = false;     
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

    if (document.myForm.email.value.search(emailRegEx) == -1) {
              alert("Please enter a valid email address.");
              return false;
    }


    if (document.getElementById('email').value == document.getElementById('confirmEmail').value) {
        alert("Thank you for your interest!");
            return true;              
    } else {
        alert("Email addresses do not match.  Please retype them to make sure they are the same.");
        return false;
    }

    return status;
}

function confirmEmailAddresses(){
    if (checkforblank() == true) {
        if (verifyEmail() == true) {
            document.getElementById("myForm").submit();
        }
    } 
}
</script>

HTML

<form name="myForm" action="contact.php" method="post" enctype="application/x-www-form-urlencoded" onsubmit="">
<table width="377" height="96" align="center">
  <tr>
    <td style="text-align: right">First Name:</td>
    <td><label for="FirstName"></label>
      <input type="text" name="fname" id="fname"></td>
  </tr>
  <tr>
    <td style="text-align: right">Last Name:</td>
    <td><label for="LastName"></label>
      <input type="text" name="lname" id="lname"></td>
  </tr>
  <tr>
    <td style="text-align: right">E-mail:</td>
    <td><input type="email" name="email" id="email"></td>
  </tr>
  <tr>
    <td style="text-align: right">Confirm E-mail:</td>
    <td><input type="email" name="confirmEmail" id="confirmEmail"></td>
  </tr>
</table>
<p align="center"><input type="submit" value="Send" onClick="confirmEmailAddresses()"><input type="reset" value="Reset Form"></p>

</form>

Could u post form HTML please. Thanks

Dane Caswell
– Dane Caswell

2013-10-06 02:18:01 +00:00
Commented Oct 6, 2013 at 2:18 — Dane Caswell
– Dane Caswell, Commented Oct 6, 2013 at 2:18
I did today! Sorry for the delay!

user2638775
– user2638775

2013-10-07 05:40:46 +00:00
Commented Oct 7, 2013 at 5:40 — user2638775
– user2638775, Commented Oct 7, 2013 at 5:40
Thanks! I have put an answer below! I hope it helps?

Dane Caswell
– Dane Caswell

2013-10-08 01:47:24 +00:00
Commented Oct 8, 2013 at 1:47 — Dane Caswell
– Dane Caswell, Commented Oct 8, 2013 at 1:47

Amit Singh · Accepted Answer · 2013-10-06 15:15:30Z

1

I guess this is what you are looking for:

<script>
function checkforblank() {
    var errormessage = "";

    if (document.getElementById('fname').value ===""){
        errormessage += "enter your first name \n";
    }
    if (document.getElementById('lname').value ===""){
        errormessage += "enter your last name \n";
    }
    if (document.getElementById('email').value ===""){
        errormessage += "enter your email \n";
    }
    if (document.getElementById('confirmEmail').value ===""){
        errormessage += "confirm your email \n";
    }

    if (errormessage !== ""){
        alert(errormessage);
        return false;
    } 
    else{return true;}
}

function verifyEmail() {
    var status = false;     
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    var email_reg = document.getElementById('email').value;

    if (!email_reg.match(emailRegEx)) {
              alert("Please enter a valid email address.");
              return false;
    }


    else if (document.getElementById('email').value !== document.getElementById('confirmEmail').value) {
        alert("Email addresses do not match.  Please retype them to make sure they are the same.");
            status = false;            
    } else {
        alert("Thank you for your interest!");
        status = true;
    }

    return status;
}

function confirmEmailAddresses(){
    if((checkforblank())&&(verifyEmail())){return true;}else{return false;}


}

And call this function like this:

<form name="a" method="post" onSubmit="return confirmEmailAddresses()" action="xyz.html" id="a">

edited Oct 6, 2013 at 15:15

answered Oct 6, 2013 at 2:45

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

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

11 Comments

user2638775 Over a year ago

And it still sends blank forms if not filled out at all.

Amit Singh Over a year ago

@user2638775 where exactly are you calling "confirmEmailAddresses()" ?

user2638775 Over a year ago

The call is in the JavaScript and then it is attached to the "Submit" button.

Amit Singh Over a year ago

try the code i have posted, you just have to change the name of the form in yur code, as in my code the name of the form is "a"

Amit Singh Over a year ago

@user2638775: do let me know if you face any issues using my code. I'll be available after 6 hrs from now ")

|

Dane Caswell · Accepted Answer · 2013-10-08 01:46:26Z

1

Try removing the onClick event from the submit button, and add return confirmEmailAddresses(); to the onsubmit event of the main form element.

Make sure that the confirmEmailAddresses() function has the line return true; if the validation passes! Else return false;.

answered Oct 8, 2013 at 1:46

Dane Caswell

2015 silver badges9 bronze badges

2 Comments

user2638775 Over a year ago

I've done all of this with no success. :( I appreciate your help though. This is the code I have: function confirmEmailAddresses(){ if (checkforblank() == true) { if (verifyEmail() == true) { document.getElementById("myForm").submit(); return false; } } } I also have: function confirmEmailAddresses(){ if((checkforblank())&&(verifyEmail())){return true;}else{return false;}

Dane Caswell Over a year ago

Instead of "document.getElementById("myForm").submit();" try just using "return true;". If you make the function call "onsubmit" as described above, ensuring it says "return confirmEmailAddress();" the form is now expecting true or false to be returned. Sorry i overlooked this before!

hiester · Accepted Answer · 2013-10-06 02:43:23Z

0

You might try

return false;

after each of your alert() calls.

edited Oct 6, 2013 at 2:43

answered Oct 6, 2013 at 2:26

hiester

2185 silver badges12 bronze badges

2 Comments

user2638775 Over a year ago

Thank you for the tip! I shall try it. Just some clarification...after each of my alert calls? The form submits fine in Firefox and Chrome, but not in Safari.

user2638775 Over a year ago

So I tried "return false" but it makes it not work in any browser now. Any other suggestions? I do appreciate the help!

hiester · Accepted Answer · 2013-10-06 02:45:50Z

0

Isn't that what you want? If the form is not valid, you want to show the alert and not submit the form, right?

It might help to see the html form where you're calling confirmEmailAddresses()

answered Oct 6, 2013 at 2:45

hiester

2185 silver badges12 bronze badges

1 Comment

user2638775 Over a year ago

The invalid form is sending in Safari only. It's quite odd! I appreciate the help! I'm still working on it!

Collectives™ on Stack Overflow

PHP JavaScript Validation Error

4 Answers 4

11 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related