javascript - 尽管经过验证，Google HTML 表单仍会提交

Question

我有一个表单，它写入电子表格的次数与它一样多。输入字段的状态为必填，表单在提交时调用脚本。

搜索后我发现验证需要在提交之前进行，但我正在努力使其工作。有什么建议吗？表单代码在这里:

Form Code

我已经尝试了这里建议的解决方案:Check required fields on Form

通过添加 <div class="ss-item-required">标签和代码

    function formcheck() {
  var fields = $(".ss-item-required")
        .find("select, textarea, input").serializeArray();

  $.each(fields, function(i, field) {
    if (!field.value)
      alert(field.name + ' is required');
   }); 
  console.log(fields);
}

但我在控制台上得到的只是类未定义错误。

Answer 1

所以你的代码有两个主要问题导致你的问题。首先，检查表单的验证功能，formCheck() , 实际上不在任何包含 <script> 的范围内标签 - 因此需要更改此代码才能将代码作为脚本执行。

其次，为了防止在验证失败时提交表单，您需要在允许执行 runGoogleScript() 之前实际执行验证结果检查。 :

<button type="submit" id="submitButton" class="blue" onclick="return formCheck();">SUBMIT ENTRY</button>

如果表单在 formCheck() 内验证然后你可以执行 runGoogleScript()像这样:

function formCheck() {

    var flag = false;

    var fields = $(".ss-item-required").find("select, textarea, input").serializeArray();

    $.each(fields, function(i,field) {
        if(!field.value) {
            alert(field.name +' is required');
            flag = true; //Flag that the form is invalid
        }
    });

    //If form is valid, 'flag' will be false
    if (!flag) {
        runGoogleScript(); //Execute script
    }

    return false; //If the validation fails

    console.log(fields);

}

希望这对您有所帮助。