已删除“必需”属性的字段会在提交后继续进行验证

Question

我有一个表单提交几个字段。其中两个用于更改密码。

在提交之前，不需要填写这些密码字段。但是，如果其中一个不是空白，我通过jQuery更改了两个字段所需的属性。我清空一个属性时删除属性，另一个也已空。

它似乎在大多数时间都有效，但有一个例外：

1. 我填写密码
2. password2为空
3. 我提交表格

在这种情况下，密码2的验证显示，但如果我想删除所有内容并提交，我不能：

4. 我删除密码
5. 我再次提交表格
6. password2的验证再次出现。即使在HTML源中删除了“required”属性

这是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()循环（以确保检查所有值）...和布尔“标志”（真/假）。

在该循环之后，使用该“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>