Check Field Validity and Fields Filled Before Submission?

Question

I am revising this question as I have changed things.

I have a form with a few fields, three of which have regex validation. I also have a function which checks if all fields are filled before the submit button is enabled, this works fine. However if the fields are filled but the invalid fields ae invalid, I can still submit the form. I want to know if I am able to merge my functions so that I can check if the fields are filled AND valid before enabling the submit button?

I have tried adding an extra && clause but this doesn't work, and I tried to implement the jQuery validate plug-in but it seemed very limited and I can't validate a postcode using it.

Here is a reduced version of my project:

 // ~~~ postcode validation function validatePostcode(postcode) { var pcode = /^[a-zA-Z]{1,2}[0-9][0-9A-Za-z]{0,1} {0,1}[0-9][A-Za-z]{2}$/; return pcode.test(postcode); } function validateP() { var postcode = $("#postcode").val(); if (validatePostcode(postcode)) { $("#postcode").removeClass("is-invalid"); return true; } else { alert('Please enter a valid postcode'); $("#postcode").addClass("is-invalid"); } return false; } // ~~~ validate if form is filled completely, toggles submit & edit button $(document).on('change keyup invalid', '.required', function(e) { var disabled = true; $(".required").each(function() { var value = this.value; if ((value) && (value.trim();= '')) { disabled = false. $('.toggle-disabled'),prop("disabled"; false); } else { disabled = true. $('.toggle-disabled'),prop("disabled"; true); return false; } }); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <div class="col-md-6"> <input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required> </div> <div class="col-md-6"> <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

Use below regex:

/^([0-9a-zA-Z\-\._]+)@([0-9a-zA-Z\-\._]+)\.([a-zA-Z]){2,7}$/