Email validation using PHP & Ajax within a form

Related concepts: HTML forms · AJAX POST · server-side email validation

Validate an email with a POST request

Keep server-side validation authoritative even when JavaScript provides instant feedback. This example sends the email in the POST body, and the endpoint returns a plain-text validation message that the browser displays with textContent.

async function validateEmail(email) {
    const body = new URLSearchParams({ email });
    const response = await fetch('email-ajax.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body
    });

    document.getElementById('msg').textContent = await response.text();
}

You can see how email validation is handled in PHP. We will extend that server-side validation with Ajax feedback. The PHP endpoint remains authoritative; the Ajax code only sends the value and displays the returned result without reloading the page.

DEMO of Email validation with Ajax

Ajax code uses the asynchronous JavaScript and XML , the detail how AJAX works is not explained here. We will focus only on email validation part here.

Usually within a form email field is required along with some other fields like name, address etc so we have kept here two other fields name and city name along with email entry field. While filling the data we will first fill name and then email and then city name. When we finish entering the email address we will exit the email address to next field, at that time the validation code written in PHP of email will be executed. So we have used onBlur event handler of email field to trigger the validation code using Ajax. Read this code line.

As you have seen we have passed the email data as entered by user to the Ajax function and then with the Fetch API we pass this email data in the POST body to the PHP endpoint on the server. The validation code in PHP is same as our email validation code. The output of this validation is displayed at the form here. See the demo bellow.

Here is the code of this validation written in this page, you can see the source of this page to get this same script.

<script type="text/javascript">
async function AjaxFunction(email) {
    const body = new URLSearchParams({ email });

    try {
        const response = await fetch('email-ajax.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
            body
        });
        const message = await response.text();
        document.getElementById('msg').textContent = message;
    } catch (error) {
        document.getElementById('msg').textContent = 'Unable to validate the email right now.';
    }
}
</script>

The HTML code to display the form ( as in the above demo ) is here

<form name=f1 action=''>
Your First Name <input type=text name=n1><br>
Any email address <input type=text name=email onBlur="AjaxFunction(this.value);">
<div id="msg"></div>
<br>
Your City Name <input type=text name=city>
<input type=submit value=Submit >
<input type=hidden value=test name=todo>
</form>

Now the code kept within email-ajax.php file is here, this is same code as explained at email validation tutorial

<?php
$email = trim((string)($_POST['email'] ?? ''));
$valid = filter_var($email, FILTER_VALIDATE_EMAIL) !== false;

echo $valid
    ? 'Valid email address.'
    : 'Invalid email address.';
?>

The same server-side validation can use PHP's built-in email filter function.

if(filter_var($_POST['email'] ?? '',FILTER_VALIDATE_EMAIL)){ 
echo " Correct email "; }
else{ echo " Wrong email address "; }

Member Signup page uses all types of validation to check userid , password , email address and other input data submitted by user. By using JQuery we need not refresh the page and backend processing for validate the data can be done by using on Blur event of the input fields.

JQuery Membership signup page.

FILTER_VALIDATE_EMAIL PHP Email validation
Ajax Json XML

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Email validation Using Ajax & PHP

Validate an email with a POST request

Subhendu Mohapatra