Ajax submit form with jquery not validating

Question

could you please help me with the code above?

I', trying to have some validation in there but the validation is not being executed and the form is submitted without the validation:

HTML:

              <form method="post" action="" id="subscription-form">
                <div class="form-group">
                  <input class="subscribe-email" type="email" name="email" placeholder="[email protected]" required>
                  <p><span class="error-message">Please enter a valid email</span></p>
                </div>
                <button id="" class="" type="submit"><span>Subscribe</span></button>
              </form>

JS:

$(document).ready(function() {

    $('#subscription-form').on('submit', function (e) {

      var form = $(this);
      var regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      var url = "https://mycustomapi.net";

      if (!$('.subscribe-email').val().match(regexEmail)) {
        $('.error-message').hide();
        $.ajax({
          type: "POST",
          url: url,
          data: form.serialize(),
          success: function (data) {
            $('#subscribed-error').hide()
            $('#subscribed-feedback').show()
            $('#subscription-form').hide()
          },
          error: function () {
            $('#subscribed-error').show()
            $('#subscribed-feedback').hide()
            $('#subscription-form').show()
          }
        });
        console.log('email submitted');
        e.preventDefault();
        return false;
      }
      else {
        $('.error-message').show();
        e.preventDefault();
        return false;
      }
    });

  });

Thanks

Stan Loona · Accepted Answer · 2019-04-29 00:13:13Z

1

Your error was the ! operator

$(document).ready(function() {

    $('#subscription-form').on('submit', function (e) {

      var form = $(this);
      var regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g;
      var url = "https://mycustomapi.net";

      if ($('.subscribe-email').val().match(regexEmail)) {
        $('.error-message').hide();
        $.ajax({
          type: "POST",
          url: url,
          data: form.serialize(),
          success: function (data) {
            $('#subscribed-error').hide()
            $('#subscribed-feedback').show()
            $('#subscription-form').hide()
          },
          error: function () {
            $('#subscribed-error').show()
            $('#subscribed-feedback').hide()
            $('#subscription-form').show()
          }
        });
        console.log('email submitted');
        e.preventDefault();
        return false;
      }
      else {
      	console.log("not submitted");
        $('.error-message').show();
        e.preventDefault();
        return false;
      }});
});

<form method="post" action="" id="subscription-form">
                <div class="form-group">
                  <input class="subscribe-email" type="text" name="email" placeholder="[email protected]" required>
                  <p><span class="error-message">Please enter a valid email</span></p>
                </div>
                <button id="" class="" type="submit"><span>Subscribe</span></button>
              </form>

answered Apr 29, 2019 at 0:13

Stan Loona

7351 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PM. Over a year ago

Yes, ! was the major issue, but even after fixing that, error message will not appear. All the selectors in jquery are using ID selector i.e. '#' and DOM has all the classes,so selector needs to be the class one 'dot' and not '#'

Fabio Zanchi Over a year ago

Thanks for your reply xKurisu. @DM, even after these changes (! operator and "#" to "." the show on "errormessage" ($('.error-message').show();) didn't work

Fabio Zanchi Over a year ago

Done removed the !important here: #error-message{ display: none;

Collectives™ on Stack Overflow

Ajax submit form with jquery not validating

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related