Question

我可以对其表单进行实时验证，但是AJAX函数无法正常工作。每当我单击提交时，其直接重定向到没有ajax功能的mailer.php。我尝试了所有方法来解决问题，但没有运气。有人请帮帮我。

当所有字段均经过验证时，我单击“提交”按钮时，应转到AJAX表单并提交。

 $(function validateForm(){
        $("#cname").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Please enter the Name"
        });
        $("#cnumber").validate({
            expression: "if (VAL.match(/^[0-9\.\-\/]+$/)) return true; else return false;",
            message: "Please enter a valid Phone number"
        }); 
         $("#csubject").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Please enter the Subject"
        });
        $("#cemail").validate({
            expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
            message: "Please enter a valid Email ID"
        });
        $("#cmessage").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Please enter the Message"
        });

        var form = $('#ajax-contact');

        var formMessages = $('#form-messages');

        $(form).validated(function(e){

            $(formMessages).addClass('wait').text("please wait...");

            e.preventDefault();

            var formData = $(form).serialize();
            var action = $(this).attr('action');



            $.post(action, $(form).serialize(),
                function(data) {
                    if (data.match('success') != null) $('#ajax-contact .form-group, #ajax-contact .theme-btn').slideUp('slow');
                }
            )
            .done(function(response) {
                // Make sure that the formMessages div has the 'success' class.
                $(formMessages).removeClass('error');
                $(formMessages).addClass('success');


                // Set the message text.
                $(formMessages).text(response);



                // Clear the form.
                $('#cname').val('');
                $('#cemail').val('');
                $('#cnumber').val('');
                $('#csubject').val('');
                $('#cmessage').val('');

                gtag('event', 'form_submission', {
                  'event_category': 'contact_us',
                  'event_label': 'success'
                });

            })
            .fail(function(data) {
                // Make sure that the formMessages div has the 'error' class.
                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');

                // Set the message text.
                if (data.responseText !== '') {
                    $(formMessages).text(data.responseText);
                } else {
                    $(formMessages).text('Oops! An error occured and your message could not be sent.');
                }
            })


        });
    });

HTML

<form id="ajax-contact" method="post" action="mailer/function/smtpemail.php" class="wpcf7-form AdvancedForm" autocomplete="on">
  <div class="form-group">
    <input id="cname" type="text" name="cname" value="" placeholder="NAME">
  </div>
  <div class="form-group">
    <input id="cemail" type="email" data-missing="This field is required" data-mismatch="Please include a valid email" name="cemail" value="" placeholder="EMAIL">
  </div>
  <div class="form-group">
    <input id="cnumber" type="text" maxlength="15" name="cnumber" value="" placeholder="MOBILE">
  </div>
  <div class="form-group">
    <input id="csubject" type="text" name="csubject" value="" placeholder="SUBJECT">
  </div>
  <div class="form-group">
    <textarea id="cmessage" draggable="false" name="cmessage" placeholder="YOUR MESSAGE"></textarea>
  </div>
  <div class="form-group">
    <button onclick='return validateForm()' type="submit" id="submit" class="theme-btn btn-style-four">Submit</button>
  </div>
  <div id="form-messages"></div>
</form>

Answer 1

您可以使用submit函数：

$("#ajax-contact").submit(function(e) {
    if (!yourValidationFunction()) {
        e.preventDefault();
    }
});

Ajax函数在表单上不起作用-jQuery

1 个答案: