javascript - 发送表格后，框显示为红色，但表格已发送。这是我的代码

Question

这是我的代码，在完成表单并按下提交按钮后，表单被正确发送，但字段变成红色，就好像它们没有完成一样。我想知道这段代码有什么问题或我必须更改什么。我在互联网上找到了几个选项，但我无法解决问题。

(function($) {
  'use strict';

  var form = $('.contact__form'),
    message = $('.contact__msg'),
    form_data;

  // Success function
  function done_func(response) {
    message.fadeIn().removeClass('alert-danger').addClass('alert-success');
    message.text(response);
    setTimeout(function() {
      message.fadeOut();
    }, 3000);
    form.find('input:not([type="submit"]), textarea').val('');
  }

  // fail function
  function fail_func(data) {
    message.fadeIn().removeClass('alert-success').addClass('alert-success');
    message.text(data.responseText);
    setTimeout(function() {
      message.fadeOut();
    }, 3000);
  }

  form.submit(function(e) {
    e.preventDefault();
    form_data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: form_data
      })
      .done(done_func)
      .fail(fail_func);
  });

})(jQuery);

/* ------- */


/* CONTACT */


/* ------- */

#contact {
  background: #1d1e22;
  padding: 6em 1em 4em;
}

.contact {
  background: #1d1e22;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.contact h3 {
  margin: 0 0 1rem 0;
}


/* ---- */


/* FORM */


/* ---- */

input {
  width: 100%;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid #5A5A5A;
  color: #fff;
}

 ::-webkit-input-placeholder {
  color: #EAEAEA;
  font-size: 12px;
  letter-spacing: 2px;
}

.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.contact form label {
  display: block;
}

.contact form p {
  margin: 0;
}

.contact form .full {
  grid-column: 1 / 3;
}

.contact form button,
.contact form input,
.contact form textarea {
  width: 100%;
  padding: 1em;
  border-radius: 4px;
}

.contact form textarea {
  resize: none;
  width: 100%;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid #5A5A5A;
  color: #fff;
}

.contact form button {
  background: #BB4F51;
  border: 0;
  color: #e4e4e4;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

.contact form button:hover,
.contact form button:focus {
  background: #8F3D3F;
  color: #ffffff;
  outline: 0;
  transition: background-color 2s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CONTACT FORM -->
<div class="contact">
  <form class="contact__form" method="post" action="mail.php">
    <p>
      <input type="text" name="name" class="form-control" id="name" placeholder="Nume" required data-error="Introduceți numele.">

    </p>

    <p>

      <input type="text" name="phone" class="form-control" id="phone" placeholder="Telefon" required data-error="Introduceți numarul de telefon.">

    </p>


    <p>
      <input type="email" name="email" class="form-control" id="email" placeholder="E-mail (Correo Electronico)" required data-error="Introduceți un e-mail.">
    </p>

    <p>

      <input type="text" name="subject" class="form-control" id="subject" placeholder="Reclamatie / Informatii" required data-error="Introduceți un subiect.">
    </p>

    <p class="full">
      <textarea name="message" rows="5" id="msg" placeholder="Mesaj / Reclamatie" required data-error="Scrieți un mesaj."></textarea>
    </p>

    <p class="full">
      <button type="submit" id="submit" class="btn btn-success">Trimite</button>
    </p>


    <div class="col-12">
      <div class="alert alert-success contact__msg" style="display: none" role="alert">
        <i class="fa fa-check"></i>Mesajul dumneavostră a fost trimis cu succes.<br />
      </div>
    </div>


  </form>
</div>

Answer 1

由于您在表单输入元素中使用了属性“required”，并且在函数 done_func() 成功操作 ajax POST 后将值设置为“”(一个空值但不是 null)，这会导致田野变红似的。 解决方案是尝试“重置”字段而不是设置“”值。

例如:[input type="reset"id="x"...] 然后通过 jQuery 触发它。