javascript - 单击按钮时多次出现验证消息

Question

我制作了着陆页并使用 jquery after() 方法显示验证消息。当用户多次单击时，验证消息会被附加，输入框会在单击后不正确。当我在 after() 上使用 append() 时，它根本不显示验证错误消息。我可以使用什么方法来显示验证消息？或者我需要处理固定高度宽度的表格还是我犯了很大的错误？谢谢。 Validation error messages

表格

        <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 " id="e_form">
            <h2>Enquiry Form</h2>
            <form name="enquiry-form" method="post" action="#" id="enquiry-form" novalidate="">
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="name" id="name" placeholder="Enter your name here" required="required">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control input-height" name="email" id="email" placeholder="Enter your Email-ID" required="required">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="number" id="phone" placeholder=" Enter your Mobile Number" required="required" maxlength="10">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="city" id="city" placeholder="Enter your city" required="required">
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="4" name="details" id="details" placeholder="Enter message here" required="required"></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default btn-lg" name="Submit" id="submit" onclick="CheckBlank(event)">Get Started</button>
                </div>
            </form>
        </div>

Jquery 验证

    <script>


 function CheckBlank(e) {
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var phone = $('#phone').val();
        var city = $('#city').val();
        var details = $('#details').val();

        if (name === "" && email === "" && phone === "" && city === "" && details === "") {
           // $('input,textarea').css("border", "1px solid red");
            $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");
            $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");
            $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");
            $("#city").after("<div class='validation' style='color:red;'>Please Enter Your City</div>");
            $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");
          //  $("#submit").prop("disabled",true);
        } 
        else if (name === "" || email === "" || phone === "" || city === "" || details === "") {
            $("#submit").prop('disabled',false);
            $('#name').val() !== '' ? $('#name').css("border", "none") && $('.validation').remove() :
                $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");

            $('#email').val() !== '' &&  !ValidateEmail($("#email").val()) ? $('#email').css("border", "none") && $('.validation').remove() :
                $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");

            $('#phone').val() !== '' ? $('#phone').css("border", "none") && $('.validation').remove() && $('.valid-email').remove():
                $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");

            $('#city').val() !== '' ? $('#city').css("border", "none") && $('.validation').remove() :
                $("#city").after("<div class='validation' style='color:red;'>Please Enter Your city</div>");

            $('#details').val() !== '' ? $('#details').css("border", "none") && $('.validation').remove() :
                $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");

        } 
        else {
            $("#submit").after("<div class='greeting' style='color:#3b9a80;'>Thank You !! We Will Contact You Within 24 Hours  !!</div>");
            $('input,textarea').val("");
            $("#submit").prop('disabled',false);
            $('.validation').remove();
            $(".greeting").fadeOut(5000);    
        }
    }

    $("#name,#email,#phone,#city,#details").on("keydown", function(e) {
    if  (e.which == 9) {  // tab key press 
            $('#name').val() !== '' ? $('#name').css("border", "none") && $('.validation').remove() :
                $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");

            $('#email').val() !== '' && !ValidateEmail($("#email").val()) ? $('#email').css("border", "none") && $('.validation').remove() && $('.valid-email').remove():
                $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");

            $('#phone').val() !== '' ? $('#phone').css("border", "none") && $('.validation').remove() && $('.valid-phone').remove():
                $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");

            $('#city').val() !== '' ? $('#city').css("border", "none") && $('.validation').remove() :
                $("#city").after("<div class='validation' style='color:red;'>Please Enter Your city</div>");

            $('#details').val() !== '' ? $('#details').css("border", "none") && $('.validation').remove() :
                $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");
        }
    });


    $("#name,#city").on("keypress", function(e) {
        var regex = /^[a-zA-Z ]*$/;  // prevent pressing numbers and other symbols
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        } else {
            e.preventDefault();
            return false;
        }
    });


    $("#phone").on("change", function(e) {
        if ($("#phone").val().length != 10)  {
            $("#phone").append("<div class='valid-phone' style='color:red;'>Please Enter Valid Phone Number</div>"); 
        }
        else{
            $('.valid-phone').remove();
        }         
    });

    $('#phone').keypress(function(key) {
        if (key.charCode < 48 || key.charCode > 57) return false; // prevent pressing other than numbers
    });


    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    }

    $("#email").on("change", function() {
        if (!ValidateEmail($("#email").val())) {
            $('.validation').remove();
            $("#email").append("<div class='valid-email' style='color:red;'>Please Enter Valid Email ID</div>");
        } else {
            $('.valid-email').remove();
            return;
        }
    });


    $("#phone,#email,#phone,#city").on({
        keydown: function(e) {
            if (e.which === 32)  // prevent pressing space bar 
                return false;
        },
        change: function() {
            this.value = this.value.replace(/\s/g, "");
        }
    });
    </script>

Answer 1

如果你想继续这个过程，当你增加表单大小时，它很难处理。我建议您使用表单输入添加错误消息容器的 span 元素，并通过验证单独处理内容。

<form id="loginform" name="loginform" action="myurl.com" method="post">
<input type="text" name="username" /><span id="usernameError"></span>
<input type="password" name="password" /><span id="passwordError"></span>
<input type="submit" value="Submit" /></form>

js代码会像

function handleinput(){
if(document.loginform.username.value == ""){
document.getElementById("usernameError").innerHTML = "You must enter a username";
return false;}
if(document.loginform.password.value == ""){    document.getElementById("passwordError").innerHTML = "You must enter a password";
return false;}}

这个跨度将充当错误消息的容器，我们可以借助 JavaScript 更好地控制错误消息