Estoy tratando de validar varios elementos de formulario, como <input> y <textarea> , pero parece que no puedo hacerlo funcionar. Intenté obtener los valores del formulario colocando los valores en una matriz y recorriéndolos, pero no funciona.
if (!checkform($('#myform'))) { alert("Please fill all required fields"); } else { // do something } function checkform(form) { // get all the inputs within the submitted form var inputs = form.serializeArray(); for (var i = 0; i < inputs.length; i++) { // only validate the inputs that have the required attribute if (inputs[i].value.trim == null || inputs[i].value.trim === '') { // found an empty field that is required return false; } } return true; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form id="myform"> <label class="form-label">Firstname</label> <input type="text" name="firstname" class="form-control" id="firstname" required> <label class="form-label">Message</label> <textarea id="message" type="text" rows="3" name="message" placeholder="enter your message"> </textarea> </form>Su recorte es incorrecto: debería ser inputs[i].value.trim() === ""
Además, no asignó la validación al envío del formulario.
$('#myform').on("submit",function(e) { if (checkform($(this))) return true; alert("Please fill all required fields"); e.preventDefault() }); function checkform($form) { // get all the inputs within the submitted form var inputs = $form.serializeArray(); for (var i = 0; i < inputs.length; i++) { // only validate the inputs that have the required attribute if (inputs[i].value.trim() === '') { // found an empty field that is required return false; } } return true; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form id="myform"> <label class="form-label">Firstname</label> <input type="text" name="firstname" class="form-control" id="firstname" required> <label class="form-label">Message</label> <textarea id="message" type="text" rows="3" name="message" placeholder="enter your message"> </textarea> <input type="submit" /> </form>