Question

我已经制作了登录页面并使用jquery after()方法来显示验证消息。当用户点击多次验证消息后，点击后输入框将失去格式点击。当我append()使用after()时，它根本不会显示验证错误消息。我可以使用哪些方法来显示验证消息？或者我需要使用固定的高度宽度的表格，还是我犯了很大的错误？谢谢。 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元素，并单独处理内容并进行验证。

SecondSegue

js代码就像

<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>

此范围将充当错误消息的容器，我们可以借助JavaScript更好地控制错误消息

Answer 2

只需在CheckBlank（e）方法中添加$('div.validation').remove();即可 JSFiddle：https://jsfiddle.net/44Luvysr/11/

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

2 个答案: