如何使用 Kendo UI 中的验证禁用表单中的提交按钮

Question

我有一个包含 2 个输入字段和下拉选项的表单。我怎样才能禁用提交按钮，直到并且除非两个字段都正确填写

<form method="POST" id="formcheck">
   <label>first</label>
   <select class="" id="first" name="first"></select>
   <label>second</label>
   <select class="" id="second" name="second"></select>
   <input type="submit" id="submitForm" value="Submit">
</form>

在我的js文件中我已经写了这个，这是正确的吗？

$("#first").kendoValidator();

$("#second").kendoValidator();

Answer 1

查看客户端表单验证文档以了解表单验证的基础知识。

然后查看 Telerik 的验证器概述文档和验证器演示。

您可以使用 required 属性强制输入。

<form method="POST" id="formcheck">
   <label>first</label>
   <select class="" id="first" name="first" required></select>

   <label>second</label>
   <select class="" id="second" name="second" required></select>

   <input type="submit" id="submitForm" value="Submit">
</form>

然后使用表单上的验证器。

<script>
    $(document).ready(function() {
        var validator = $("#formcheck").kendoValidator().data("kendoValidator");

        $("form").submit(function(event) {
            event.preventDefault();

            if (validator.validate()) {
                console.log('form is valid');
            } else {
                console.log('form is NOT valid');                
            }
        });
    });
</script

Answer 2

试试这个（在普通js中）：

let checkSelectFields = () => 
{
  let submitOk = true,
      selectFields = document.querySelectorAll('select'),
      i = 0;
      
  for (i; i < selectFields.length; i++) {
    if (!selectFields[i].value) { 
      submitOk = false;
      break;
    }
  }
  
  document.querySelector('#submitForm').disabled = !submitOk;
};

document.querySelectorAll('select').forEach(select => select.addEventListener('change', checkSelectFields));

checkSelectFields();

<form method="POST" id="formcheck">
   <label>first</label>
   <select class="" id="first" name="first"><option></option><option>Opt 1</option></select>
   <label>second</label>
   <select class="" id="second" name="second"><option></option><option>Opt 1</option></select>
   <input type="submit" id="submitForm" value="Submit">
</form>