Блог

Я добавил в свою форму кнопку «Продолжить», но кнопка доступна для нажатия, когда форма вообще не заполнена, кнопка не должна вращаться, и в настоящее время форма все равно не будет отправлена, потому 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="e.g. 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> 

позволь мне помочь тебе. На самом деле с jQuery есть довольно простое решение.

Прежде всего, мы можем удалить обязательный атрибут в обоих полях ввода. И пока мы этим занимаемся, давайте также удалим все текущие события onClick.

Затем мы добавляем идентификатор к нашей кнопке отправки, давайте просто назовем ее «отправить». Мы добавим новое событие onClick, функцию JS, к нашей кнопке отправки. Поэтому всякий раз, когда нажимается кнопка, функция будет вызываться. Имя функции — «validateEntry».

Какова цель этой функции? В функции мы проверяем, пустое ли поле пароля, и если это не так, то будет добавлен счетчик. Сначала мы проверим длину пароля, если он равен нулю (0), то счетчик не появится, и вы сможете решить, что произойдет вместо этого (например, предупреждение об отсутствии пароля,…). Таким образом, счетчик появится только в том случае, если есть пароль.

Именно поэтому больше нет необходимости в обязательном атрибуте.

Кроме того, я рекомендую вам установить минимальную/максимальную длину пароля с помощью 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');
    }
  }