表单提交成功后去掉required属性

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

$(this.('.index-form').find("input[type=text]").val("");

您可以通过将 .val() 设置为空来清空表单值，您必须在 ajax 响应后将其打开。 并且也不要使用淡入和淡出，而是尝试使用隐藏和显示功能，两者的工作方式可能相同。

Answer 2

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

脚本

    <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()方法。

如果遇到问题，请随时提出疑问。编码快乐....!!!!!!