Поле с удаленным обязательным атрибутом продолжает проверку после отправки

Question

У меня есть форма для отправки нескольких полей.Два из них предназначены для изменения пароля.

Эти поля пароля не обязательны для заполнения перед отправкой.Однако, если одно из них не пустое, я добавляю обязательный атрибут в оба поля, когда он изменяется через jQuery.Я удаляю атрибуты, когда очищаю одно, а другое уже пусто.

То, что кажется, работает в большинстве случаев за исключением:

1. Я заполняю пароль
2. пароль2 пусто
3. Я отправляю форму

В этом случае проверка для пароль2 появляется, но если я хочу удалить все и отправить, я не могу:

Я удаляю пароль Я снова отправляю форму Подтверждение password2 снова появляется.Даже если атрибут «required» удален в исходном коде HTML

Это HTML-код:

<form id="edicionPerfilForm" action="actor/edit.do" method="post">
   <div class="row">
      <div class="form-group col-md-4">
         <div>
            <label for="password">Password</label>
            <input id="password" name="password" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">
            <br>    
         </div>
      </div>
      <div class="form-group col-md-4">
         <div>
            <label for="password2">Repeat password</label>
            <input id="password2" name="password2" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">    
         </div>
      </div>
   </div>
   <button name="save" type="submit" class="btn btn-dark">Send</button>
</form>

И код jQuery:

$('#password').change(function() {
        if($(this).val() != ''){
            $(this).attr('required', true);
            $( '#password2' ).attr('required', true);
        }else{
            if($('#password2').val() == ''){
                $(this).removeAttr('required');
                $( '#password2' ).removeAttr('required');
            }           
        }
    });
    $('#password2').change(function() {
        if($(this).val() != ''){
            $(this).attr('required', true);
            $('#password').attr('required', true);
        }else{
            if($('#password').val() == ''){
                $(this).removeAttr('required');
                $('#password').removeAttr('required');
            }           
        }
    });

И это пример в JSFiddle:

https://jsfiddle.net/jke3pgh0/

Answer 1

Я предложу вам другой подход здесь ...

Во-первых, вам нужен только один обработчик для этого, так как логика одинакова для обоих входов.Вы можете использовать более одного селектора ... Например: $('#password, #password2').Но я бы вместо этого использовал класс ... Как $(".password").Это зависит от вас.

Во-вторых, я сказал, что «логика та же» ... То есть :

Еслиодин из двух входов не пустой, оба требуются.

Таким образом, наличие одинакового обработчика событий change на обоих входах означает, что вы не знаете, какой из них вызвал событие.Поэтому я предлагаю использовать цикл .each() (чтобы убедиться, что вы проверяете все значения) ... и логический "флаг" (true / false).

После этого цикла используйте "flag" для установки атрибута required.

Я использовал правило CSS, чтобы сделать результат очевидным в приведенном ниже фрагменте кода.

$('#password, #password2').change(function(){
  
  // Look up for the password inputs in that "row".
  var pass_inputs = $(this).closest(".row").find("[type='password']");
  
  // Flag to determine if at least one is not empty.
  var not_empty = false;
  
  // Loop throug the password inputs and change the flag.
  pass_inputs.each(function(){
    if($(this).val() != ''){
    not_empty = true
    }
  });
  
  // Use the flag as the boolean argument for the required attribute.
  pass_inputs.attr('required', not_empty);
});

[required]{
  border: 3px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="edicionPerfilForm" action="actor/edit.do" method="post">
  <div class="row">
    <div class="form-group col-md-4">
      <div>
        <label for="password">Password</label>
        <input id="password" name="password" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">
        <br>    
      </div>
    </div>
    <div class="form-group col-md-4">
      <div>
        <label for="password2">Repeat password</label>
        <input id="password2" name="password2" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">    
      </div>
    </div>
  </div>
  <button name="save" type="submit" class="btn btn-dark">Send</button>
</form>