JQuery 如何在空白和空白处验证表单输入和文本区域？

Question

I am trying to validate multiple form elements such as <input> and <textarea> but I cant seem to get it to work. I tried getting the values from the form by putting the values in an array and looping through it but it doesn't work.

 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>

Answer 1

Your trim is wrong - it should be inputs[i].value.trim() === ""

Also you did not assign the validation to the form submit

 $('#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>