CODEWITHSUNDEEP
javascriptjqueryhtmlajaxemail
M. Safari
M. Safari

Reputation: 313

Verify email address before sending it via html form with ajax

There's an html form for email subscribing which is connected to mailerlite,

<form class="ml-block-form" action="" data-code="ID" method="POST">
    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
        <input id="mainval" class="newsletter-email" type="email" name="fields[email]" placeholder="Enter email address" />
    </div>
    <input type="hidden" name="ml-submit" value="1" />
    <p>
        <input id="formsubmit" class="newsletter-submit" type="submit" value="Submit" />
    </p>
</form>

and this is the ajax part:

$(".ml-block-form").submit(function() {
    var vals = $(this).serialize();

    $.ajax({
        url: "//app.mailerlite.com/webforms/submit/ID",
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thanks");
            $('#formsubmit').css('background-color', '#6cd270');
        }
    });

    return false; // prevent from submit
});

Now the problem is that even if someone enters an invalid email address, or just hitting the submit button without entering any email address, It will work.
How can I verify the email address to find out if it's correct, using ajax before sending it to mailerlite via POST method?

Upvotes: 1

Views: 3736

Answers (3)

Gideon Brett
Gideon Brett

Reputation: 23

If client validation is enough, your input field is already of type email so that will automatically validate the field for you.

If you want to validate it in js however, you can check the field using regex on submit.

This question has a good code block you could use before you make the ajax call to check if your field has a validated email.

Upvotes: 0

Shubhranshu
Shubhranshu

Reputation: 521

function validateForm() {
 var email = $('#mainval').val();
 if(email === "") {
  return false;
 }
 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 return regex.test(email);
}
      $(".ml-block-form").submit(function(){
        if(validateForm()) {

       var vals = $(this).serialize();

        $.ajax({
            url: "//app.mailerlite.com/webforms/submit/ID",  
            method: "POST",
            data: vals,
            success: function(data) {
                $("#formsubmit").val("Thanks");
                $('#formsubmit').css('background-color', '#6cd270');
            }
        });
        }
        return false; // prevent from submit
    });

Upvotes: 1

Dario
Dario

Reputation: 6280

If client validation is enough, just validate your email field before actually calling the server:

function emailValidation(email) {
   //write code to validate email; return true if email is valid, false otherwise
   if (email === '') { 
      return false;
   }
   //...other checks here 
   return true;
}

$(".ml-block-form").submit(function() {

    //validate email here; exit if email is invalid
    if (!emailValidation($("#mainval").val())) {
       return false;
    }
    //email has passed validation, submit the form
    var vals = $(this).serialize();

    $.ajax({
        url: "//app.mailerlite.com/webforms/submit/ID",
        method: "POST",
        data: vals,
        success: function(data) {
            $("#formsubmit").val("Thanks");
            $('#formsubmit').css('background-color', '#6cd270');
        }
    });

    return false; // prevent from submit
});

Upvotes: 0

Related Questions