jQuery Ajax 表单未在 iPhone 上提交

Question

我有一个如下所示的 jQuery Ajax 表单：

<form method="post" action="contact.php" class="contact-form">
    <div class="contact-empty">
       <input type="text" name="name" id="name" placeholder="Name *" class="txt-name" />
       <input type="text" name="email" id="contact-email" placeholder="Email Address *" class="txt-email" />
       <textarea rows="4" name="message" cols="60" id="message" placeholder="Message *" class="txt-message"></textarea>
       <span class="btn-contact-container">
            <button id="contact-submit" class="btn-contact">Submit</button>
            <img src="images/loading.gif" alt="Loading..." width="62" height="62" id="contact-loading">
       </span>
       <span class="contact-error-field"></span>
   </div>
   <div class="contact-message"></div>
</form>

这是我发送它的 js：

$(document).ready(function () {
    $('#contact-submit').click(function () {
         $('.contact-error-field').hide();
         var nameVal = $('input[name=name]').val();
         var emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
         var emailVal = $('#contact-email').val();
         var messageVal = $('textarea[name=message]').val();

       //validate
       if (nameVal == '' || nameVal == 'Name *') {
           $('.contact-error-field').html('Your name is required.').fadeIn();
                return false;
            }
            if (emailVal == "" || emailVal == "Email Address *") {
               $('.contact-error-field').html('Your email address is required.').fadeIn();
                return false;
            } 
            else if (!emailReg.test(emailVal)) {
                 $('.contact-error-field').html('Invalid email address.').fadeIn();
                return false;
            }
            if (messageVal == '' || messageVal == 'Message *') {
                $('.contact-error-field').html('Please provide a message.').fadeIn();
                return false;
            }

            var data_string = $('.contact-form').serialize();

            $('.btn-contact').hide();
            $('#contact-loading').fadeIn();
            $('.contact-error-field').fadeOut();

            $.ajax({
                type: "POST",
                url: "contact.php",
                data: data_string,

                //success
                success: function (data) {

                    $('.btn-contact-container').hide();
                    $('.contact-message').html('<i class="fa fa-check contact-success"></i>Your message has been sent.').fadeIn();
                },
                error: function (data) {

                    $('.btn-contact-container').hide();
                    $('.contact-message').html('<i class="fa fa-times contact-error"></i>Something went wrong, please try again later.').fadeIn();
                }

            }) //end ajax call

        return false;
    });
});

我有一个订阅表单，它使用相同的代码，只需一个电子邮件输入，并且可以在 iphone 上正常提交。

但是，联系表单卡在“无效的电子邮件地址”。尝试从 iPhone 提交时，即使您输入的电子邮件是正确的。它适用于桌面。

我尝试将按钮更改为 type="submit" 输入。没有改变任何东西。

更新：我的正则表达式错误，我用以下内容替换它并且它有效：

var emailReg =  /^(([^<>()[\]\\.,;:\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,}))$/igm;

Answer 1

不要使用click() 提交表单，而是使用submit()：

只需更改 javascript 代码的顶部，使其看起来像这样：

$(document).ready(function () {
    $('form.contact-form').submit(function (e) {
         e.preventDefault(); // <-- prevents normal submit behavior

并将您的按钮更改为type=submit

   <button type="submit" id="contact-submit" class="btn-contact">Submit</button>