Post and submit problems using javascript, forms and php - php

Question

I am trying to create a validate-email javascript and get it working with forms and PHP. Of coures, some problems...
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.
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.
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

<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:
Put validation/submission stuff on form onsubmit, not input click, to ensure it is always called for all types of form submission.
Better to avoid inline event handlers.
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.

Answer 2

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.