如何在 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

试试这个（在香草 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>

Answer 2

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

然后查看 Telerik 的Validator Overview文档和 Validator demo 。

您可以使用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