使用 ajax 的 bootstrap 5 表单验证帖子

【问题标题】：bootstrap 5 form validation post with ajax使用 ajax 的 bootstrap 5 表单验证帖子
【发布时间】：2022-01-26 12:42:49
【问题描述】：

如果检查成功，我如何序列化和发布数据。

标准验证javascript：

 (function () {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('#contact-form')

// Loop over them and prevent submission
Array.prototype.slice.call(forms)
  .forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})();

【问题讨论】：

到目前为止你尝试了什么？
ajax 帖子。但没有用。

标签： javascript php ajax

【解决方案1】：

你可以试试下面的代码，它对我有用：

<form class="needs-validation" role="form" id="contact-form" method="post" novalidate>
        <input type="text" name="fullname" value="">
        <input type="email" name="email" value="">
<button type="button" id="submit">Send</button>
</form>
<script type="text/javascript">
  $(document).ready(function() {

$("#submit").click(function() {
    var form = $("#contact-form")

    if (form[0].checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    } else {
        var data = form.serialize();
        // console.log(data);
        $.ajax({
        type : 'POST',
        url  : '/submit.php',
        data : data,
        success :  function(data)
               {
                // console.log(data);
                    if(data.succ == 1)
                    {
                        console.log('Success');
                    }else{
                        console.log('Error');
                    }
               },
        error: function (data) {
                // console.log(data);
            }
        });
    }
    form.addClass('was-validated');

  });    
});
</script>

【讨论】：