表单验证 - 错误消息不输出

debugcn 发表于 Dev

conye9980

我成功输出成功消息但没有输出错误消息？错误必须在最后的 else 语句之前的 if 语句中，但我看不到在哪里。有人会有什么想法吗？

提交后是否还有淡出方式删除表单并留下“你做到了！恭喜”的文字？

<html>
<head>
    <link rel="stylesheet" type="text/css" href="forms.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <title>jQuery</title>


</head>
<body>

<div id="wrapper">
    <div id="errorMessage"></div>
    <div id="successMessage">You did it! Congratulations!</div>

    <div class="form-element">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" placeholder="[email protected]">
    </div>
    <div class="form-element">
        <label for="phone">Phone</label>
        <input type="phone" name="phone" id="phone" placeholder="Eg: 0879688552">
    </div>
    <div class="form-element">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </div>
    <div class="form-element">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" name="confirm-password" id="confirm-password">
    </div>
    <div class="form-element">
        <input type="submit" id="submit" value="Sign Up">
    </div>
    <script type="text/javascript">
        function isEmail(email) {

            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            return regex.test(email);
        }

        $("#submit").click(function() {

            var errorMessage = "";
            var fieldsMissing = "";

            if ($("#email").val() == "") {
                fieldsMissing += "<br> Email"
            }

            if ($("#phone").val() == "") {
                fieldsMissing += "<br> Phone"
            }

            if ($("#password").val() == "") {
                fieldsMissing += "<br> password"
            }

            if ($("#confirm-password").val() == "") {
                fieldsMissing += " Confirm Password"
            }
            if (fieldsMissing != "") {
                errorMessage+= "Fields Missings:" + fieldsMissing;

            }


            if (isEmail($("#email").val()) == false) {
                errorMessage+= "Your email address is not valid! ";
            }

            if ($.isNumeric($("#phone").val()) == false) {
                errorMessage+= "Your phone number is not valid!";
            }

            if ($("#password").val() != $("#confirm-password").val()) {
                errorMessage += "Your passwords don't match! ";
            }

            if (errorMessage != "") {
                $("#errorMessage").html(errorMessage);
            }

            else {

                $("#successMessage").show();
                $("#errorMessage").hide();
            }
        });

    </script>

</body>

</html>

Trimantra 软件解决方案

You can try like this

    if (errorMessage != "") {
        $("#successMessage").hide();
        $("#errorMessage").html(errorMessage);
        return false;
    } else {
        $(".form-element").hide();
        $("#successMessage").show();
        $("#errorMessage").hide();
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。