AJAX表单仍然使用Happy.js

Question

HTML5验证在Safari中无效，因此我使用的是Happy.js。 我的表单仍然通过Safari中的ajax提交，但下面的代码（这里是JSFiddle）。

如何在使用ajax发送表单之前验证＃email-input？

以下代码检查if ($(this).hasClass('unhappy'))然后不提交表单，如果它没有类unhappy，则提交表单。但我想问题是它从一开始就没有类unhappy。  使用此引用：isHappy.js allowing ajax call when not valid

  $(document).ready(function() {
    function ajaxEmailForm() {
        $(".sendingEmailLink, .sentEmailLink").hide();
        $('#email-form').submit(function(event) {
            event.preventDefault();
            var formserialize = $(this).serialize();
            var submitButton = $('#submitEmailForm');
            $.ajax({
                type: 'POST',
                url: 'https://formkeep.com/f/MYID',
                accept: {
                    javascript: 'application/javascript'
                },
                data: formserialize,
                beforeSend: function() {
                    $(".sendEmailLink").hide();
                    $('.sendingEmailLink').show();
                },
                complete: function() {
                    $(".sendingEmailLink").hide();
                },
                success: function(d) {
                    $('.sentEmailLink').show();
                },
                error: function() {
                    $('.notification-e--phone').slideDown("medium", function() {});
                },
            }).done(function(data) {
                submitButton.prop('disabled', 'disabled');
            });
        });
    };
    $('#email-form').isHappy({
        fields: {
            '#email-input': {
                required: true,
                test: happy.email,
                message: 'Please enter your full email address.',
                errorTarget: '.email-input-error'
            }
        }
    });
    var is_unhappy = false;
    $('#email-form div :input').each(function(i) {
        if ($(this).hasClass('unhappy')) {
            is_unhappy = true;
            return false;
        }
    });
    if (!is_unhappy) {
        ajaxEmailForm();
    };
  });