Удалите обязательный атрибут после завершения отправки формы

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, а также вместо того, чтобы использовать fade in и fade out, просто попробуйте использовать функцию hide и show, обе могут работать одинаково.

Answer 2

Мне не понятен ваш вопрос, Вы хотите сбросить форму или удалить класс ошибок. Но в любом случае я постараюсь решить оба:

SCRIPT

    <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 не поддерживает какой-либо метод, такой как reset () javascript, поэтому вы можете вызвать метод reset () javascript.

Не стесняйтесь задавать вопросы, если застряли. Удачного кодирования .... !!!!!