Question

它是一个简单的形式，如下所示：

＆＃13;

<form class="form register-form" data-parsley-validate data-parsley-excluded="input[type=button],input[type=submit], input[type=reset]" method="POST">
          <div class="notification hide"></div>
          <div class="row first-rg">
            <div class="col-sm-6">
              <input type="text" class="tfield-2" name="contact_fname" id="contact_fname" placeholder="First Name*" required data-parsley-trigger="focusout">
              <div style="display:none;"><input type="text" class="tfield-2" name="contact_projectname" id="contact_projectname" value="Royal Pearls"></div>
            </div>
            <div class="col-sm-6">
              <input type="text" class="tfield-2" name="contact_lname" id="contact_lname" placeholder="Last Name*" required data-parsley-trigger="focusout">
            </div>
          </div>
          <div class="row second-rg">
            <div class="col-sm-6">
                          <input type="text" id="contact_phone" placeholder="Phone No. *" name="contact_phone" maxlength="50" required="" class="international-number-input international-phone-number-input intl-phone-number-input" aria-required="true" autocomplete="off" data-parsley-intl-tel-no data-parsley-trigger="focusout" required>
            </div>
            <div class="col-sm-6">
              <input type="email" class="tfield-2" name="contact_email" id="contact_email" placeholder="Email*" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-error-message="Enter Valid Email" required>
            </div>
          </div>
          <p class="form-tag">Are you searching for a</p>
          <div class="checkbox regiterpage">
            <label class="background-co">
            <input 
              type="checkbox" 
              value="1" 
              name="bedroom[]"
              required 
              type="checkbox" 
              data-parsley-mincheck="1" 
              data-parsley-error-message="Check atleast 1"
            >
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 1 Bedroom </label>
            <label class="background-co" >
            <input type="checkbox" value="2" name="bedroom[]">
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 2 Bedrooms </label>
            <label class="background-co">
            <input type="checkbox" value="3" name="bedroom[]">
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 3 Bedrooms </label>
            <label class="background-co">
            <input type="checkbox" value="4" name="bedroom[]">
            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 4 Bedrooms </label>
          </div>
          <div class="radioin">
            <p class="form-tag">Are you searching for a property as an</p>
            <label class="radio-inline background-co">
            <input type="radio" 
            name="propertytype"
            required 
            data-parsley-mincheck="1" 
            data-parsley-error-message="Check atleast 1"
            >
            <span class="rlabl">End-user / Owner-occupier</span> </label>
            <label class="radio-inline background-co">
            <input type="radio" name="optradio">
            <span class="rlabl">Investor</span> </label>
          </div>

          <!-- HIDDEN INPUTS FOR google captcha -->
          <input type="hidden" value="No Bots" id="google-captcha" required>
          <input type="hidden"  id="google-captcha-check" data-parsley-equalto="#google-captcha" data-parsley-error-message="Fill the captcha!"  required>
          <!-- HIDDEN INPUTS FOR google captcha -->

          <div class="captch">
            <div class="g-recaptcha" data-sitekey="6LdksigUAAAAAKw5idd69Xa3ysK_RZJ3xAleTbVj" data-callback="google_captcha_callback" data-expired-callback="google_captcha_callback"></div>
          </div>
          <button type="submit" class="btn-default">Submit</button>
        </form>

＆＃13;

现在我已经使用parsely.js验证了表单，验证工作正常，但是我的提交处理程序存在问题，我的表单中有以下提交处理程序：

＆＃13;

$('.register-form').submit(function() {
        $.ajax({
            type: 'POST',
            url: 'mail/reg_send.php',
            data : $('.register-form').serialize(),
            success : (data , status) => {
                (data === 'success') ? $('.notification').text('Thank you for contacting us.').removeClass('hide') : $('.notification').text('There was a problem submitting your form').removeClass('hide');
                $('.register-form')[0].reset();
            }
        });
        return false;
    });

＆＃13;

但即使我在提交处理程序中有一个提交处理程序和一个返回false，页面仍然刷新，甚至我在我的开发工具中向我的提交处理程序添加一个断点，从未到达断点。为什么？我在这做错了什么？

我尝试将提交处理程序更改为更通用的内容，例如：

$('form').submit((){
   // code here
})

但我的页面仍然会反映。为什么？

Answer 1

在处理程序中包含function(e)和prevent default的事件。

$('.register-form').submit(function(e) {
    e.preventDefault();
    // the rest of your code
});

您的另一个问题可能是您的事件处理程序没有附加到该元素，因为它在执行JavaScript时不可用。您可以使用以下代码轻松测试：

$(document).on("submit", ".register-form", function(e) {
    e.preventDefault();
    // the rest of your code
});

Ajax提交处理程序不起作用，验证工作

1 个答案: