jQuery Ajax form not submitting on iPhone

Question

I have a jQuery Ajax form that looks like this:

<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>

Here's my js that sends it:

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

I have a subscribe form that uses the same code with just an email input and that submits fine on an iphone.

The contact form, however, gets stuck at 'Invalid email address.' when trying to submit from an iPhone even though the email you enter is correct. It works on desktop.

I've tried changing the button to a type="submit" input. Didn't change anything.

UPDATE: My regex was wrong, I replaced it with the following and it worked:

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

Instead of using click() to submit your form, use submit() :

Just change the top of your javascript code so it looks like this:

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

And change your button to type=submit

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