Сбросить неверное состояние ввода HTML5

Question

Входные данные с проверкой изначально не помечены как недействительные, пока значение не изменится.Как мне восстановить это начальное состояние?

Моя проблема в деталях: у меня есть простая форма заказа.Если пользователь нажимает кнопку «Добавить элемент», я клонирую первый элемент и очищаю поля ввода.Но так как я использую проверку html5, очистка делает их недействительными.

Вот что происходит после нажатия «Добавить продукт», даже если первый набор полей действителен:

Демонстрация: http://jsfiddle.net/WEHdp/ (просмотр в Firefox):

<form action="/orders/preview" method="post">
  <div class="orderData">
    <input name="order[order_items_attributes][0][articleno]" pattern="[0-9]{4}" required /> /
    <input name="order[order_items_attributes][0][colorno]" pattern="[0-9]{3}" required />
    <div>
      <a href="#" class="removeOrder">Remove product</a>
      <a href="#" class="addOrder">Add product</a>
    </div>
  </div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(document).ready(function() {
  $(".addOrder").live("click", function (event) {
    event.preventDefault();

    // Clone div
    $('.orderData:first').clone().insertAfter(".orderData:last");
    // Empty the fields
    $('.orderData:last input').val("");
  });

  $(".removeOrder").live("click", function (event) {
    event.preventDefault();
    if($('.orderData').size() > 1){
      $(this).parents('.orderData').remove();
    }
  });
});
</script>

Answer 1

Клонировать строку на странице готово, тогда у вас всегда будет ссылка на строку в состоянии по умолчанию.

Примерно так:

$(document).ready(function() {
  var firstCopy = $('.orderData:first').clone();
  $(".addOrder").live("click", function (event) {
    event.preventDefault();

    // Clone div
    firstCopy.clone().insertAfter(".orderData:last");
    // Empty the fields
    $('.orderData:last input').val("");
  });

  $(".removeOrder").live("click", function (event) {
    event.preventDefault();
    if($('.orderData').size() > 1){
      $(this).parents('.orderData').remove();
    }
  });
});

Answer 2

Проверка

в формате HTML 5 помечает поле как недействительное, поскольку у вас есть атрибут required.Удалите это, и маркировка исчезнет, ​​когда поле будет пустым.Это связано с тем, что пустые состояния допустимы для необязательных полей, в то время как требуемые поля становятся недействительными (отсюда и маркировка).

Нет необходимости в взломахПросто логика:)