onsubmit 返回 false 后表单提交按钮不起作用

Question

在提交之前，如果检查了两个字段之一，我将检查 2 个字段，否则我返回 true，否则返回 false。 问题是，如果返回 false，则 ido 检查两个复选框之一，但提交按钮似乎不起作用（我做 console.log()）点击它显示 customvalidity 消息

显示问题的gif gif

这是代码：

function validateForm() {
  var checkcapelli = $('#TaglioCapelli').is(':checked'); 
  var checkcolore = $('#checkcolore').is(':checked');
  console.log(checkcapelli);
  console.log(checkcolore); 
  console.log("hello");

  if (checkcapelli || checkcolore){
    return true;
  }else{
    document.getElementById('TaglioCapelli').setCustomValidity("Selezionare almeno una opzione");
    return false;   
  }
}

表单（我删除了一些字段）：我确实选中了两个复选框：

<form id="userForm" action="php/userForm.php" onsubmit="return validateForm()" method="post">
                <div class="modal-body">         




                    <div class="form-group">
                      <input class="form-check-input" type="checkbox"   name ="TaglioCapelli" id="TaglioCapelli" >
                      <label class="form-check-label" for="TaglioCapelli">
                       Taglio Capelli
                      </label> 
                      <input class="form-check-input" type="number" readonly value ="30" name ="tempTaglioCapelli" id="tempTaglioCapelli" >
                      <label class="form-check-label" for="tempTaglioCapelli">
                        Tempo in minuti
                       </label> 
                    </div>
                    <div class="form-group">
                      <input class="form-check-input" type="checkbox"  name ="checkcolore" id="checkcolore" >
                      <label class="form-check-label" for="checkcolore">
                        Colore Capelli
                      </label>
                      <input class="form-check-input" type="number" readonly name ="tempcheckcolore" value ="40" id="tempcheckcolore" >
                      <label class="form-check-label" for="tempcheckcolore">
                        Tempo in minuti
                       </label> 
                    </div>
                    <div class="form-group">
                      <label for="noteUser">Note</label>
                      <input type="text" name ="noteUser"  class="form-control" id="noteUser" placeholder="Opzionale">
                    </div>
                    <div class="form-group">
                      <label for="finalTime">Tempo finale stimato</label>
                      <input type="text" name ="finalTime"  class="form-control" readonly id="finalTime" placeholder="">
                    </div>
                  </div>
                <div class="modal-footer">
                  <div class="form-check mb-2 mr-sm-2 tratdati">
                    <input class="form-check-input" type="checkbox" required name ="CheckDati" id="CheckDati" checked>
                    <label class="form-check-label" for="CheckDati">
                      Autorizzo il trattamento dei dati
                    </label>
                  </div>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
                  <button type="submit" id="sendUserForm"  class="btn btn-primary">Prenota</button>
                </div>
              </form>

Answer 1

因为当您第一次提交表单时，它会将表单置于“无效”state 中。 在更改字段以将表单放入有效的 state 之前，表单不会提交。

两种选择：

$('input[name="myinput"]').on("blur", () => {
    // Do your checks and setCustomValidity depending on if is valid or not
});

或者您可以将提交按钮更改为

type="button" onclick="submitForm()"
function submitForm() {
...do my validation checks
call form.submit() if validation passes. 
}

Answer 2

将复选框 html 从

 <input class="form-check-input" type="checkbox"  name ="TaglioCapelli" id="TaglioCapelli" >

至

 <input onClick="this.setCustomValidity('')" class="form-check-input" type="checkbox"  name ="TaglioCapelli" id="TaglioCapelli" >

单击此处，我们将取消添加的自定义验证。 注意：在这种情况下，即使您尝试选中其他复选框并尝试提交，它仍然不会按照您设置的验证逻辑提交表单。