Node.js Express Project to Verify & Validate Bulk Emails Using AJAX in Browser Using Javascript

Welcome folks today in this blog post we will be validating and verifying bulk emails using ajax in browser using node.js and express in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new node.js project using the below command as shown below

npm init -y

npm i express

npm i email-verify

And after that you will be seeing the below directory structure of the node.js app as shown below

And now we need to make the index.js file and copy paste the following code

index.js

const express = require('express')
const bodyParser = require('body-parser')
var verifier = require('email-verify');

const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


app.get('/', (req, res) => {

    res.sendFile(__dirname + "/index.html")

})


app.listen(5000, () => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const bodyParser = require('body-parser')

var verifier = require('email-verify');

const app = express()

app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json())

app.get('/', (req, res) => {

res.sendFile(__dirname + "/index.html")

})

app.listen(5000, () => {

console.log("App is listening on port 5000")

})

As you can see we are making a new express app and then we are loading the index.html file when we go to the / route as shown above.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>
        Validate Email
    </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <h1 class="text-center">Bulk Email Address Checker</h1>
        <form id="form">
            <div class="form-group">
                <label for="emails">Enter Emails: (One Per Line)</label>
                <textarea class="form-control" rows="10" cols="20" id="emails" placeholder="Email names"
                    required></textarea>
            </div>
            <div class="form-group">
                <button id="button" class="btn btn-block btn-danger">
                    Validate Emails
                </button>
            </div>
        </form>
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Email Address</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody id="body"></tbody>
            </table>
        </div>
        <br /><br />
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $("#form").submit(function (e) {
        e.preventDefault();

        var emails = $("#emails").val().split("\n");

        $("#body").empty();

        $("#button").text("Checking Emails Please Wait");

        $("#button").prop("disabled", "true");

        console.log(emails);

        emails.forEach((email) => {


            $.ajax({
                method: "POST",
                url: "/validateemail",
                data: { email: email },
                success: function (data) {
                    console.log(data);

                    $("#button").text("Validate Email");

                    document.getElementById("button").disabled = false;

                    if (data.message) {

                        $("#body").append(`
                  <tr>
                     <td>${data.email}</td>
                     <td class="alert alert-success">Valid Email</td> 
                  </tr>

                  `);
                    } else {

                        $("#body").append(`
                  <tr>
                     <td>${data.email}</td>
                     <td class="alert alert-danger">Invalid Email</td> 
                  </tr>

                  `);
                    }
                },
            })
        })
    });
</script>

</html>

<!DOCTYPE html>

<html>

<head>

<title>

Validate Email

</title>

</head>

<body>

<h1 class="text-center">Bulk Email Address Checker</h1>

<label for="emails">Enter Emails: (One Per Line)</label>

<textarea class="form-control" rows="10" cols="20" id="emails" placeholder="Email names"

required></textarea>

</div>

Validate Emails

</button>

</div>

</form>

<div>

<thead>

<tr>

<th>Email Address</th>

<th>Message</th>

</tr>

</thead>

</table>

</div>

</div>

</body>

$("#form").submit(function (e) {

e.preventDefault();

var emails = $("#emails").val().split("\n");

$("#body").empty();

$("#button").text("Checking Emails Please Wait");

$("#button").prop("disabled", "true");

console.log(emails);

emails.forEach((email) => {

$.ajax({

method: "POST",

url: "/validateemail",

data: { email: email },

success: function (data) {

console.log(data);

$("#button").text("Validate Email");

document.getElementById("button").disabled = false;

if (data.message) {

$("#body").append(`

<tr>

<td>${data.email}</td>

<td class="alert alert-success">Valid Email</td>

</tr>

`);

} else {

$("#body").append(`

<tr>

<td>${data.email}</td>

<td class="alert alert-danger">Invalid Email</td>

</tr>

`);

}

})

});

</script>

</html>

As you can see in the above code we are having a simple textarea element where we allow the user to enter the bulk emails and then we have the button to validate the emails. And then we have the javascript ajax code and inside it we are making the post request to the /validateemail in the express server to validate the emails. And then we are showing the result in the bootstrap table where we are showing whether the email is valid or not. And now we need to add the post request inside the index.js file as shown below

index.js

app.post('/validateemail', async (req, res) => {

    let email = req.body.email

    verifier.verify(email, function (err, info) {

        res.json({
            email: email,
            message: info.success
        })

    })
})

app.post('/validateemail', async (req, res) => {

let email = req.body.email

verifier.verify(email, function (err, info) {

res.json({

email: email,

message: info.success

})