How to disable the submit button in form using Validation in Kendo UI

Question

I have a form of 2 input fields with dropdown options. How can I disable the submit button until and unless both the fields are filled correctly

<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>

In my js file I have written this, is this correct?

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

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

Answer 1

Try this (in vanilla 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

Check out the Client-side form validation documentation to understand the basics of form validation.

Then look at Telerik's Validator Overview documentation and the Validator demo.

You can use the required attribute to make an input mandatory.

<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>

Then use the validator on the 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