按钮内部的 SPINNER 正在旋转，表单输入字段内部没有任何内容

Question

我在我的表单“继续”按钮中添加了一个微调器，但是当表单根本没有填写时该按钮是可点击的，该按钮不应该能够旋转并且当前表单无论如何都不会提交，因为required=""在输入

 const btn = document.querySelector(".button"); btn.classList.add("button--loading"); btn.classList.remove("button--loading");

 .button { position: relative; padding: 8px 16px; background: #009579; border: none; outline: none; border-radius: 2px; cursor: pointer; }.button:active { background: #007a63; }.button__text { font: bold 20px "Quicksand", san-serif; color: #ffffff; transition: all 0.2s; }.button--loading.button__text { visibility: hidden; opacity: 0; }.button--loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: button-loading-spinner 1s ease infinite; } @keyframes button-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }

 <h1>Login</h1> <input type="text" id="usr" name="usr" class="input input--text input-type__input input--w-6" maxlength="35" minlength="4" placeholder="eg name@example.com" autocomplete="email" required=""> <br> <input type="password" id="password" name="password" class="input input--text input-type__input input--w-6" maxlength="35" minlength="2" placeholder="Password" autocomplete="current-password" required=""> <div class="orderweb__3a7c2968"> <div class="orderweb__f659f0f0"></div> </div> </div> <br> <div class="orderweb__d28fa935"> </span> </div> </div> <span class="ccl-67e0c7f3fe50cf69 ccl-a97a150ddadaa172"> <button type="submit" tabindex="0" onclick="this.classList.toggle('button--loading')" onclick="this.parentNode.style.display = 'none'" class="button ccl-d0484b0360a2b432 ccl-233931c277401e86 ccl-ed9aadeaa18a9f19 ccl-a97a150ddadaa172 btn u-mb-xl btn--loader js-loader js-submit-btn" name="action[save_continue]"> <span class="ccl-cce251427bbe4ec4"> <span class="btn__inner" onclick="this.parentNode.style.display = 'none'">Continue</span> </button>

Answer 1

让我来帮你。 jQuery 实际上有一个非常简单的解决方案。

首先，我们可以删除两个输入字段上的 required 属性。 在我们这样做的同时，让我们也删除所有当前的 onClick 事件。

然后我们将一个 id 添加到我们的提交按钮，我们简单地称它为“提交”。 我们将添加一个新的 onClick-Event，一个 JS function 到我们的提交按钮。 因此，无论何时单击按钮，都会调用 function。 function 的名称是“validateEntry”。

function 的用途是什么？ 在 function 中，我们检查密码字段是否为空，如果不是，将添加微调器。 我们将首先检查密码的长度，如果它是 null (0)，那么微调器将不会出现，您可以决定将发生什么（例如，密码丢失警报，...）。 所以微调器只会在有密码的情况下出现。

这也是为什么不再需要 required 属性的原因。

另外，我会建议您使用 JS 设置密码的最小/最大长度。 您可以在那里添加一些额外的功能（例如禁用空格或剪切复制粘贴）。

所以这是代码，希望我能帮助你。

<h1>Login</h1>
<input type="text" id="usr" name="usr" class="input input--text input-type__input   input--w-6" maxlength="35" placeholder="e.g. name@example.com" autocomplete="email">
<br>
<input type="password" id="password" name="password" class="input input--text input-type__input   input--w-6" maxlength="35"placeholder="Password" autocomplete="current-password">
<div class="orderweb__3a7c2968">
    <div class="orderweb__f659f0f0"></div>
</div>
</div>
<br>
<div class="orderweb__d28fa935">
    </span>
</div>
</div> <span class="ccl-67e0c7f3fe50cf69 ccl-a97a150ddadaa172">
<button type="submit" id="submit" tabindex="0" class="button ccl-d0484b0360a2b432 ccl-233931c277401e86 ccl-ed9aadeaa18a9f19 ccl-a97a150ddadaa172 btn u-mb-xl btn--loader js-loader js-submit-btn" name="action[save_continue]" onclick="validateEntry()">
<span class="ccl-cce251427bbe4ec4">
<span class="btn__inner">Continue</span> </button>

.button {
    position: relative;
    padding: 8px 16px;
    background: #009579;
    border: none;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.button:active {
    background: #007a63;
}

.button__text {
    font: bold 20px "Quicksand", san-serif;
    color: #ffffff;
    transition: all 0.2s;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

//when clicking on submit button
function validateEntry(){
    //check if password field is empty
    var password
    password = document.getElementById('password').value.length;
    //if empty
    if(password == 0){
      //add what should happen if no password was entered
      alert("Please enter a password");
    }
    else{
      //apply spinner
      $('.btn__inner').css('display', 'none');
      var toggle
      toggle = document.getElementById('submit');
      toggle.classList.toggle('button--loading');
    }
  }