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