使用jQuery合并表单的两个动作

Question

我具有内联验证并且运行良好，但是当我单击其未提交时，因此我添加了如果所有字段都经过验证的内容，则说明您不是人，请再次单击，我不要此步骤造成混淆对于用户，我该如何解决此代码，当用户单击“提交”按钮时，它应验证所有字段并提交。

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

  // Get the form.
  var form = $('#ajax-contact');

  // Get the messages div.
  var formMessages = $('#form-messages');

  $(form).validated(function(e) {
    // alert("Use this call to make AJAX submissions.");
    $(formMessages).addClass('wait').text("You are a human! Click the submit button again to confirm your request.");

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

      // Serialize the form data.
      $(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.');
          }
        })

    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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

尝试一下。

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"
	});

	// Get the form.
	var form = $('#ajax-contact');

	// Get the messages div.
	var formMessages = $('#form-messages');

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

		// alert("Use this call to make AJAX submissions.");
		//$(formMessages).addClass('wait').text("You are a human! Click the submit button again to confirm your request.");

		$(form).submit(function (e) {
			$(formMessages).addClass('wait').text("You are a human! Click the submit button again to confirm your request.");
			// Serialize the form data.
			$(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.');
					}
				})

		});


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<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>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
   <script type="text/javascript" src="script.js"></script>
</html>