如何让 Ajax 在提交之前使用 CSS 表单验证

【问题标题】：How to get Ajax to use CSS form validation before submitting如何让 Ajax 在提交之前使用 CSS 表单验证
【发布时间】：2017-10-21 01:56:31
【问题描述】：

在提交之前使用 CSS 表单验证的最佳方法是什么？现在它无论如何都会提交。

$('#contact_submit_btn').click(function(e) {
    e.preventDefault(); // This will prevent page refresh
    $.ajax({
        url: 'contact_form.php',
        type: 'POST',
        data: $("#contact_form_id").serialize(),
        success: function(msg) {
            alert('Email Sent');
            //contact_submit();
        }               
    });
});

我猜是一个简单的 if/else，我只是不知道要检查什么。

【问题讨论】：

标签： css ajax forms validation

【解决方案1】：

您可以执行 if/else 语句，或者您可以使用几个不同的库。例如，jquery 有一个可以使用的表单验证插件。本例中的代码如下所示：

$( "form" ).submit(function( event ) {
  if ( $( "input:first" ).val() === "correct" ) {
     $.ajax({
        url: 'contact_form.php',
        type: 'POST',
        data: $("#contact_form_id").serialize(),
        success: function(msg) {
            alert('Email Sent');
            //contact_submit();
        }               
    });
  }

  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});

【讨论】：

没问题。编码愉快。