1

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?

Dario
  • 6,152
  • 9
  • 39
  • 50
M. Safari
  • 303
  • 9
  • 22
  • Do you need some server validation or client validation is enough? – Dario Jan 21 '17 at 09:21
  • @Dario I think client validation will be enough as It's a double opt-in subscribing form. – M. Safari Jan 21 '17 at 09:27
  • You are using email field type as email, is it not doing the validation before form submission? Generally, it does the validation by default if you give type as email. Please verify this part before adding redundant code to your application. Take a look [here](http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email) – JVM Jan 21 '17 at 09:35

3 Answers3

1
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
    });
Shubhranshu
  • 511
  • 3
  • 12
0

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
});
Dario
  • 6,152
  • 9
  • 39
  • 50
0

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.

Community
  • 1
  • 1
Gideon Brett
  • 23
  • 1
  • 5