没有更多无效字段时启用禁用按钮

Question

I'm looking for my ultimate interaction for a form. I would like the submit button to be disabled until the last required form-element has an value.
But it needs to be specific (I will use this code in an article I'm writing).
I want with each onblur (move outside the form field) to check whether there are still fields which have an "invalid" attribute (either the required field has no value or an field has invalid entry due to mismatch pattern).
If there is only one field left (so you're on or about to enter the last required field), I want to check on keystroke (in that last required field) whether the field has become "valid". If so, the submit-button (type = submit) should have "disabled" removed.
I would prefer this in vanilla JS, but both with Jquery would be best. :-)

Answer 1

So, I gave it a stab. Got this thing working. Could probably be more clean. And I still would prefer vanilla JS, but I couldn't find the right answers.

So this is my code:

 $( "form *:invalid" ).on( "blur", function( event ) { var invalidFields = document.querySelectorAll("form *:invalid"); var invFieldLength = invalidFields.length; function getInvalidElements() { if (invFieldLength == 1) { $( ":invalid" ).on( "change", function( event ) { console.log("laatste"); $("button[type=submit]").prop('disabled', false); }); }; if (invFieldLength >= 1) { console.log("weer disabled"); $("button[type=submit]").prop('disabled', true); }; } console.log(invalidFields); console.log(invFieldLength); getInvalidElements("form *:invalid"); }); function firstInvalidField() { var invalidFields = document.querySelectorAll("form *:invalid"); var invFieldLength = invalidFields.length; $(invalidFields[0]).focus(); console.log(invalidFields); }; 

 form { font-family: "Open Sans"; width: 40em; max-width: 100%; margin: 2em auto 2em; padding: 2.5rem; display: flex; flex-direction: column; align-items: flex-start; border-radius: 1rem; background-color: #eee; } label { margin: 1em .5em .2em; font-size: 1rem; font-weight: 600; vertical-align: text-bottom; line-height: 1.4; flex: 1 0 auto; text-align: right; } input, select, textarea { padding: .3rem .5em; box-sizing: border-box; font-size: 1.2rem; flex: 1 0 auto; width: 100%; line-height: 1; height: 2.5em; border: 3px solid #aaa; border-radius: .5em; } input:focus, select:focus, textarea:focus { border: 3px solid #333; } textarea { height: 4em; } button { position: relative; margin: .5em 2rem .5em auto; padding: .3em 1em; border-radius: .5em; font-size: 2em; max-width: 5em; } button > span { padding: .666rem; font-size: 1.5rem; display: none; color: #000; opacity: .1; width: 175%; } button > span:hover, button > span:focus { opacity: 1; transition: opacity .5s ease-in-out; } button[disabled] { cursor: not-allowed; color: #666; } button[disabled]:hover > span, button[disabled]:focus > span { position: absolute; padding: .5em; border: 3px solid #ffeb8c; border-radius: .5em; background-color: #eee; right: -1rem; top: -1rem; display: block; } button[disabled] > span a { cursor: pointer; color: blue; } button[disabled] > span a:hover, button[disabled] > span a:focus { text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="name">First name</label><input id="name" type="text" pattern="[a-zA-Z]"> <label for="lastname">Last name</label><input id="lastname" type="text" required pattern="[a-zA-Z]"> <label for="desires">Desires in life</label><textarea id="desires" type="text" required></textarea> <label for="greatest">Greatest number in the world (under 3)</label><select id="greatest" type="text" required> <option selected value="">select something</option> <option>1</option> <option>2</option> </select> <label for="lastname">Last name</label><input id="lastname" type="text"> <button type="submit" disabled><span>Sorry, you still have to fill in some fields before you can submit.<br><br><a onclick="firstInvalidField()">Lets go to the first field you need to fill or has an error...</a></span>Submit</button> </form>