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

因为当您第一次提交表单时，它会将表单置于“无效”状态。在更改字段以使其处于有效状态之前，将不提交表单。

两个选项：

$('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复选框

val schameStr = """
    |{
    |  "type": "record",
    |  "namespace": "",
    |  "name": "record_root",
    |  "fields": [
    |     {
    |       "name": "alpha",
    |       "type": [
    |         "null",
    |         "string"
    |       ],
    |       "default": null
    |     }
    |   ]
    |}""".stripMargin.replaceAll("\n", "")
val schameStr2 = """ <<----- how to merge this in?
    |{
    |  "type": "record",
    |  "name": "beta",
    |  "namespace": "",
    |  "fields": [
    |    {
    |       "name": "beta",
    |       "type": {
    |         "type": "record",
    |         "name": "beta",
    |         "fields": [
    |           "null",
    |           "string"
    |         ],
    |         "default": null
    |       }
    |    }
    |  ]
    |}""".stripMargin.replaceAll("\n", "")
val schema    = new Schema.Parser().parse(schameStr);
AvroReadSupport.setRequestedProjection(conf, schema)

...


val stream = AvroParquetSource(reader)
    .map(a => log.info(a.toString))   <--- things don't appear here

到

    while(input.hasNextLine()){
        ++rows;
        Scanner colReader = new Scanner(input.nextLine());
        while(colReader.hasNextInt()){
            ++columns;
            colReader.nextInt();
        }
        colReader.close();
   }

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

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

2 个答案: