javascript - 如何在单击时将样式应用于禁用的表单按钮

Question

Sign-Up在下面的代码中，每当用户单击按钮并且输入值出现错误时，我想对按钮应用抖动效果。（密码/邮件不匹配）

我遇到的问题是，如果输入错误，我会禁用 js 代码中的按钮，因此无法使用click或onclick。

我怎样才能做到这一点？

let mailOK = false;
let passOK = false;
$("#mailSignupInput, #mailConfirmInput").keyup
(
    () => {
        let mail1 = $("#mailSignupInput")
        let mail2 = $("#mailConfirmInput")

        if (!(mail1.val() === mail2.val())) {
            document.getElementById("mailMatch").style.display=""
            mail1.css({borderColor: "red",
                borderWidth: "3px",
                borderStyle:"solid"})
            mail2.css({borderColor: "red",
                borderWidth: "3px",
                borderStyle:"solid"})

            mailOK = false
        }
        else if (mail1.val()=== mail2.val()) {
            document.getElementById("mailMatch").style.display="none"
            mail1.css({borderWidth : "0px"})
            mail2.css({borderWidth : "0px"})
            mailOK = true
        }
    }
)

$("#passSignupInput, #passConfirmInput").keyup
(
    () => {
        let pass1 = $("#passSignupInput")
        let pass2 = $("#passConfirmInput")

        if (!(pass1.val() === pass2.val())) {
            document.getElementById("passMatch").style.display=""
            pass1.css({borderColor: "red",
                borderWidth: "3px",
                borderStyle:"solid"})
            pass2.css({borderColor: "red",
                borderWidth: "3px",
                borderStyle:"solid"})

            passOK = false
        }
        else if (pass1.val()=== pass2.val()){
            document.getElementById("passMatch").style.display="none"
            pass1.css({borderWidth : "0px"})
            pass2.css({borderWidth : "0px"})
            passOK = true
        }
    }
)

setInterval(validateSignup, 10)
function validateSignup() {
    document.getElementById("submitSignup").disabled = !(passOK === true && mailOK === true);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="signupForm" class="form" action="" method="post">
                    <!--Mail Signup Section-->
                    <div id="mailDiv">
                        <!--Mail Input-->
                        <label id="mailLabel" for="mailSignupInput">E-Mail:</label>
                        <br>
                        <input id="mailSignupInput" class="textInput" type="text" name="username"
                               placeholder="[e-mail]" autocomplete="off">
                        <br>
                        
                        <!--Confirm Mail Input-->
                        <br>
                        <label id="mailLabel" for="mailConfirmInput">Confirm E-Mail:</label>
                        <br>
                        <input id="mailConfirmInput" class="textInput" type="text" name="username"
                               placeholder="[e-mail]" autocomplete="off">
                        <br>
                        <span style="display: none; color: red" id = "mailMatch">Email values do not match</span>
                        <br>
                        <span style="display: none; color: red" id = "mailValid">Email is not valid</span>
                    
                    </div>
                    
                    <br>
                    
                    <!--Password Signup Section-->
                    <div id="passDiv">
                        <!--Password Input-->
                        <label id="passLabel" for="passSignupInput">Password:</label>
                        <br>
                        <input id="passSignupInput" class="textInput" type="password" name="pass" autocomplete="off">
                        <br>
                        
                        <!--Confirm Password Input-->
                        <br>
                        <label id="passLabel" for="passConfirmInput">Confirm Password:</label>
                        <br>
                        <input id="passConfirmInput" class="textInput" type="password" name="pass" autocomplete="off">
                        <br>
                        <span style="display: none; color: red" id = "passMatch">Passwords do not match</span>
                    </div>
                    
                    <br>
                    
                    <!--Signup Button Section-->
                    <div id="buttonDiv">
                        <input id="submitSignup" class="buttonInput" type="submit" value="SIGN-UP">
                    </div>
                </form>

标签： javascriptjquery

Answer 1

在这里，我正在监听invalid两个输入元素上的事件。如果其中之一无效，notvalid()则将调用该函数并将类名“shake”添加到按钮中。按钮抖动，动画完成后，类名再次被删除。

因此，在此示例中，我将否决所需输入元素的默认行为。由您决定这是否是一个好主意。除了摇动按钮，您还可以通过其他方式提醒用户——显示文本、设置输入元素的样式、制作提醒框等。

const notvalid = target => {
  target.form.button.classList.add('shake');
};

document.forms.form01.button.addEventListener('animationend', e => {
  e.target.classList.remove('shake');
});

document.forms.form01.user.addEventListener('invalid', e => {
  e.preventDefault();
  notvalid(e.target);
});

document.forms.form01.password.addEventListener('invalid', e => {
  e.preventDefault();
  notvalid(e.target);
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('everything is ok');
});

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}

.shake {
  animation-name: rotate;
  animation-duration: 0.3s;
  animation-iteration-count: 5;
}

<form name="form01">
  <input type="text" name="user" required/>
  <input type="password" name="password" required/>
  <button name="button">Submit</button>
</form>