Verify E-Mail with AJAX and PHP

Question

I want to submit my form and that a AJAX Call should send that data to my php file. In my php file is a e-mail validation with filter_var and if it the validation returns false the respond should get back to Javascript. Besides the validation part it works great. But everytime I want to submit and check if it is a valid email it returns false with "Please enter a valid email". Equal if it is a valid or false email address.

UPDATED - 09.08.2014/04:12
Now it works basically BUT if it has no errormessage I get an Issue Cannot read proberty "isError" of null which is logical. But don't know how to avoid that issue to pass it correctly back to javascript.

HTML

<form action="submit.php" id="SubmitForm" method="post">
  <input id="mail" name="mail" type="text" />
 </form>
 <button id="submitAll">
   <span>Submit</span>
 </button>

Javascript

function submit() {
    var $form = $('form#SubmitForm');
    $.post(
    $form.attr('action'),
    $form.serialize(),

    function (data) {
        if (data.isError) {
            $errMsg.empty().text('Please enter a valid email');
        } else {
            document.location.href = "submit.php"
        }
    },'json'); }

PHP

$profileEmail  = $_POST['mail'];
$errorMessages = array();

if(!filter_var($profileEmail, FILTER_VALIDATE_EMAIL)){
    $errorMessages[] = "* Please enter a valid e-mail";
} else {
    $errorMessages[] = "* Valid e-mail";
}

if (!empty($errorMessages)) {
    die(json_encode(array('isError' => true, 'errorMessages' => $errorMessages)));
}

Why are you sending a string to the server to perform a pattern match on it? That can be handled entirely in JS. — Quentin, Aug 08 '14 at 20:19
@Quentin you've been around here long enough that you should know that valid email address checking is hard enough that you can't perform any sort of simple client side match. The only feasible test is one that performs actual DNS lookups on the domain name part of the supplied address. — Alnitak, Aug 08 '14 at 20:40
Actually - there is _one_ valid test you can make client side - does the address have an `@` in it. But even that's not fool proof because it has to be one that hasn't been quoted in the local part - `"foo@bar"@example.com` is actually a legal address. — Alnitak, Aug 08 '14 at 20:47
OP - just try a simple form first without the AJAX - the `filter_var` code _looks_ OK, so try doing some debugging around your parameter passing etc and get that working first before introducing AJAX and its potential failure modes into the equation. — Alnitak, Aug 08 '14 at 20:52
The fact that I'm validate email adress per php is that you can easily turn of javascript and the javascript validation. — kindisch, Aug 09 '14 at 02:05
@Alnitak — The point was that the server was only doing a pattern match on it in the first place. — Quentin, Aug 09 '14 at 07:16
@OliverKindermann — Using JavaScript to send the data to the server for testing won't solve the problem of "Can be bypassed by turning off JS". You need to test when the regular form submission is done instead of trying to use Ajax to do it before the form has been completed. — Quentin, Aug 09 '14 at 07:17
@Quentin that's fair, and even though it's PHP (ugh) I'd trust a maintained function there to do a better job than homebrewed logic on the client side. — Alnitak, Aug 09 '14 at 08:11
@Quentin - The point is that the form without javascript sends to a validation.php in real. Only if the validation.php pass no errors you will get with javascript access to the submit.php. That wasn't mentioned in the code above, because it wasn't neccessary for my problem. So No Javascript = No Entrance to submit.php. Please let me know if you disagree. I'm no real programmer and yes it is all "homebrewed logic". — kindisch, Aug 10 '14 at 01:23

Alnitak · Accepted Answer · 2014-08-09T08:59:46.820

Your problem is simple - you've given your input field an ID (mail), but not a name, and therefore the serialization isn't working - you're just sending an empty query string to the server.

You need:

<input id="mail" name="mail" type="text" />

I always use both a name and ID because form submission requires the former, but DOM manipulation is (much) easier using the latter.

EDIT to avoid the new problem you've discovered after fixing the above, simply ensure that your script always returns some valid JSON, even if it's just {}. You've asked the server for some JSON - you have to return some.

score 0 · Answer 2 · answered Aug 09 '14 at 02:40

UPDATED - 09.08.2014/04:28
Now it works! I realize that my if(data.isError) operator was wrong. The code below works. Thank you for the useful input to solve the problem. :)

HTML

<form action="submit.php" id="SubmitForm" method="post">
    <input id="mail" name="mail" type="text" />
</form>
<button id="submitAll">
    <span>Submit</span>
</button>

Javascript

function submit() {
    var $form = $('form#SubmitForm');
    $.post(
    $form.attr('action'),
    $form.serialize(),

    function (data) {
        if (data && data.isError) {
            $errMsg.empty().text('Please enter a valid email');
        } else {
            document.location.href = "submit.php"
        }
    }, 'json');
}

PHP

$profileEmail  = $_POST['mail'];
$errorMessages = array();

if(!filter_var($profileEmail, FILTER_VALIDATE_EMAIL)){
    $errorMessages[] = "* Please enter a valid e-mail";
} else {
    $errorMessages[] = "* Valid e-mail";
}

if (!empty($errorMessages)) {
    die(json_encode(array('isError' => true, 'errorMessages' => $errorMessages)));
}

Your original `if` test works fine so long as you _always_ send back some valid JSON, which of course you should. The fundamental problem was still your missing `name` field. However you've now edited that back into the original question - that's not how it's supposed to work here. — Alnitak, Aug 09 '14 at 08:54
Yes you're right. The fundamental problem was that simple mistake thay my `name="mail"` wasn't equal to `$_POST["submitMail"]` thanks for that. I **deleted** it in my first code snipped because I thought it isn't necessary for this problem and I thought the `$_POST` get the ID-Tag and not the name-Tag. The further issue was that JSON returns the object instead of ignore the property isError if php returns null. — kindisch, Aug 09 '14 at 15:57

Verify E-Mail with AJAX and PHP

2 Answers2