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

Question

我正在寻找表单的最终交互。我希望在最后一个必需的表单元素具有值之前禁用提交按钮。
但它需要具体(我将在我正在撰写的文章中使用此代码)。
我希望每个 onblur(移动到表单字段之外)检查是否仍有字段具有“无效”属性(必填字段没有值或字段由于不匹配模式而具有无效条目)。
如果只剩下一个字段(所以你正在或即将输入最后一个 required 字段)，我想检查击键(在最后一个必填字段中)该字段是否已变为“有效”。如果是这样，提交按钮(type = submit)应该被“禁用”删除。
我更喜欢在 vanilla JS 中使用它，但最好同时使用 Jquery。 :-)

Answer 1

所以，我试了一下。让这个东西工作。可能会更干净。我仍然更喜欢 vanilla JS，但我找不到正确的答案。

所以这是我的代码:

$( "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>