使用jquery无法验证的Ajax提交表单

问题描述 投票:0回答:1

你能帮我解决上面的代码吗?

我想在那里进行一些验证,但验证没有被执行,表单在没有验证的情况下提交:

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;
      }
    });

  });

谢谢

jquery regex validation
1个回答
1
投票

你的错误是!操作者

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.