Post and submit problems using javascript, forms and php

Question

Hello,

I am trying to create a validate-email javascript and get it working with forms and PHP. Of coures, some problems...

1. As you can see in my form, I did define "post" as the method. But I can only retreive the data as if it was a get method. It was working before I started to add the e-mail verification script and adopt the code to it.

2. If the e-mail is incorrect, I do return false. Isn't the point that the request to the test.php (defined in action) should not be executed? As it is now, the page is accessed even if I return false.

3. Depending on the answers to the questions above, do I need to submit the form from the Javascript if the e-mail is verified ok?

javascript:

function isValidEmail() {
    regExp = /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/;
 if(document.subscribe.email1.value.search(regExp) == -1){
          alert(document.subscribe.email1.value + " Incorrect email address");
    return false; 
    } 

//document.subscribeForm.submit();

return true; 
}

php:

<?php

echo $_POST['email1'];

$mysqli = mysqli_connect("localhost", "root", "", "test", "3306");

$result = mysqli_query($mysqli, "SELECT email, id, subscriber, subscribed_date FROM `user` u;");

while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
foreach($row as $key => $value){

   echo "$key = $value<BR/>";
}
}

mysqli_free_result($result);
mysqli_close($mysqli);

?>

html:

<div id="subscribe">
  <form action="test.php" name="subscribe" method=post">
    <p id="formlabel">E-mail</p> <input type="text" name="email1">
    <br>
    <p id="formlabel">Repeat e-mail</p> <input type="text" name="email2"> <br/>
    <input type="submit" value="Subscribe" onclick="isValidEmail()">
  </form> 

Answer 1

you should attach the function to the form's onsubmit event:

<form action="test.php" name="subscribe" method="post" onsubmit="isValidEmail()">

where you can stop the event returning false. Also, you made a typo in method=post", that's why it doesn't get submitted as POST data.

Answer 2

<input type="submit" value="Subscribe" onclick="isValidEmail()">

This executes isValidEmail() and then throws away the result. The onclick itself returns undefined and the submission is not prevented.

You can say onclick="return isValidEmail()". However:

1. Put validation/submission stuff on form onsubmit, not input click, to ensure it is always called for all types of form submission.

2. Better to avoid inline event handlers.

3. You missed a " in your form's method attribute, which is presumably why it was defaulting back to get.

so:

<form id="subscribe" method="post" action="test.php">
    ...
</form>

<script type="text/javascript>
    document.getElementById('subscribe').onsubmit= function() {
        if (!this.elements.email1.value.match(/^[^@]+@[^@]+$/) {
            alert('Please enter an e-mail address');
            return false;
        }
        if (this.elements.email1.value!=this.elements.email2.value) {
            alert('E-mail addresses do not match');
            return false;
        }
        return true;
    } 
</script>

I replaced the regexp with a trivial one, because the expression you're currently using is bogus and will deny many valid e-mail addresses. Turning customers away because their e-mail address doesn't fit your conception of what an e-mail address is sucks.

‘Validating’ e-mail addresses correctly with regex is absurdly difficult. Better to include only a trivial check for obviously-malformed strings like the above. If you need to really check the e-mail address, you will have to actually try to send a mail to it, or at least try to lookup the domain name part of the address for an MXer.

See this question for discussion.