Question

单击提交时我有一个表单，如果输入框为空，则将其用红色边框突出显示。现在，在成功完成表单后，我将提交jquery ajax表单，我将显示一条消息“数据已提交”，并且我将重置表单，以便所有输入字段将以红色突出显示。现在，我想在表单提交成功后清空字段，并且不应将其突出显示为红色。

HTML

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var form = document.getElementById('index-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  }, false);
})();

$(".index-form").submit(function(e) {
  e.preventDefault();
  return false;
}
else {
  var ins_date = new Date($.now()).toLocaleString();
  var parms = {
    name: $("#name").val(),
    email: $("#email").val(),
    inserted_date: ins_date
  };
  var url2 = "http://localhost:3000/api";
  $.ajax({
    method: 'POST',
    url: url2 + "/homes",
    async: false,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(parms),
    success: function(data) {
      console.log('Submission was successful.');
      $(".alert-success").removeClass("d-none");
      $(".alert-success").fadeTo(2000, 500).slideUp(500, function() {
        $(".alert-success").slideUp(500);
      });
      $('.index-form')[0].reset();
      console.log(data);
    },
    error: function(data) {
      console.log('An error occurred.');
      console.log(data);
    },
  })
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container index-form" id="index-validation" novalidate>
  <input class="form-control" type="text" id="name" name="name" placeholder="Your name" required>
  <input class="form-control" type="email" id="email" name="email" placeholder="Email Address" required>
  <div class="invalid-feedback">Please Enter a Valid Email Id.</div>
  <input type="submit" id="submit" class="btn btn-default btn-lg btn-block text-center" value="Send">
</form>

Answer 1

我不清楚您的问题是要重置表格还是删除错误类。但是无论如何，我都会尝试解决这两个问题：

脚本

    <script type="text/javascript">
                  (function() {
                  'use strict';
                  window.addEventListener('load', function() {
                    var form = document.getElementById('index-validation');
                    form.addEventListener('submit', function(event) {
                      if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                      }
                      form.classList.add('was-validated');
                    }, false);
                  }, false);
                })();

          $(".index-form").submit(function(e) {
                    e.preventDefault();
               return false;
            } else {
                    var ins_date=new Date($.now()).toLocaleString();
                 var parms = {
                 name : $("#name").val(),
                 email : $("#email").val(),
                 inserted_date:ins_date
                 };
                 var url2="http://localhost:3000/api";
                 $.ajax({
                 method: 'POST',
                 url: url2 + "/homes",
                 async: false,
                 dataType : "json",
                 contentType: "application/json; charset=utf-8",
                 data: JSON.stringify(parms),
                 success: function(data){
                 console.log('Submission was successful.');
    //if you are removing specific property from class
                $(".alert-success").css('display', 'none');
                  $(".alert-success").fadeTo(2000, 500).slideUp(500, function(){
                  $(".alert-success").slideUp(500);
                 });     
$("form")[0].reset(); 
                 console.log(data);
                 }, error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                       },   
                    })
                 }
              });
              </script>

jQuery不支持javascript的reset（）之类的任何方法，因此您可以触发javascript的reset（）方法。

如有疑问，请随时提出疑问。编码愉快.... !!!!!

Answer 2

$（this。（'。index-form'）。find（“ input [type = text]”）。val（“”）;

您可以通过将.val（）设置为空来清空表单值，您必须在ajax响应后将其设置为空。并且也不要使用淡入和淡出功能，而要尝试使用隐藏和显示功能，两者可能都一样。

在提交表单后删除所需的属性

2 个答案: