Tengo un formulario de 2 campos de entrada con opciones desplegables. ¿Cómo puedo deshabilitar el botón de enviar hasta que ambos campos se llenen correctamente?
<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>En mi archivo js he escrito esto, ¿es correcto?
$("#first").kendoValidator(); $("#second").kendoValidator();Prueba esto (en vainilla 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>Consulte la documentación de validación de formularios del lado del cliente para comprender los conceptos básicos de la validación de formularios.
Luego consulte la documentación de descripción general del validador de Telerik y la demostración del validador.
Puede usar el atributo required para hacer que una entrada sea obligatoria.
<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>Luego use el validador en el formulario.
<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