Question

我有一个提交多个字段的表格。其中两个用于更改密码。

在提交之前不需要填写这些密码字段。但是，如果其中一个不是空白，则当通过jQuery更改属性时，我会将必需属性添加到两个字段中。当我清空一个属性而另一个也已经清空时，我将删除属性。

似乎在大多数情况下都可以正常工作的东西，

我填写了密码
密码2 为空白
我提交表格

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

我删除了密码
我再次提交表单
再次显示对 password2 的验证。即使在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()循环（以确保检查所有值）...和布尔值“ flag” （是/否）。

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

删除了“必填”属性的字段在提交后继续验证

1 个答案: