#javascript #css #forms #button #spinner
Вопрос:
Я добавил в свою форму кнопку «Продолжить», но кнопка доступна для нажатия, когда форма вообще не заполнена, кнопка не должна вращаться, и в настоящее время форма все равно не будет отправлена, потому 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>
Ответ №1:
позволь мне помочь тебе. На самом деле с 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');
}
}
Комментарии:
1. форма теперь работает отлично, только есть проблема, потому что форма все еще продолжается и переходит на следующую страницу после
alert("Please enter a password");
отображения