Question

我在输出成功消息但不是错误消息方面取得了成功？错误必须在最终else语句之前的if语句中，但我无法查看位置。有人会有任何想法吗？

也会有一个fadeOut方法在提交后删除表单，然后离开＆＃39;你做到了！祝贺＆＃34;文本？

<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="yourname@email.com">
    </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>

Answer 1

You can try like this

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

Answer 2

我不知道你是如何制作errorMessage风格但似乎你没有显示它

        if (errorMessage != "") {
            $("#errorMessage").html(errorMessage).show();
        } else {
		    $("#successMessage").show();
            $("#errorMessage").hide();
        }

这个.show（）;应该解决它

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

2 个答案: