JQUERY表单验证无法正常工作

Question

基本上，当我在textarea或textbox中键入内容时，跨度应该显示，直到符合条件为止。

仅当所有三个都通过验证后，提交按钮“保存”才显示（）。

但是，正在发生的是，当我开始用它们书写时，前两个文本框跨度正在显示（但是不是从焦点开始），但在满足条件时不会消失

       <div id="add">
        <div id="close"></div>


            <form action="" method="POST">
                <div id="name">
                    Name:<span>Please Enter Full Name</span>
                    <br/>
                    <input type="text" name="name" id="textbox">
                </div>
                <div id="company">
                    Company<span>Please Enter Company Name</span>
                    <br/>
                    <input type="text" name="company" id="textbox1">
                </div>
                <div id="review">
                    Review<span>Please Enter Review</span>
                    <br/>
                    <textarea name="comment"></textarea>
                </div>
                <div id="save">
                    <input type="submit" name="submit">
                </div>
            </form>
        </div>




        //...START OF ADDBOX
                $('span').hide();
                $('#save').hide();

                $nameText = $('#name');
                $companyText = $('#company');
                $commentText = $('#comment');


                function nameValid() {
                    if ($nameText.val().length < 5) {
                        $('#name span').show();
                    } else {
                        $('#name span').hide();
                    }
                }

                function companyValid() {
                    if ($companyText.val().length < 3) {
                        $('#company span').show();
                    } else {
                        $('#company span').hide();
                    }
                }

                function commentValid() {
                    if ($commentText.val().length < 1) {
                        $('#review span').show();
                    } else {

                        $('#review span').hide();
                    }

                }

                $nameText.focus(nameValid).keyup(nameValid).keyup(save);
                $companyText.focus(companyValid).keyup(companyValid).keyup(save);
                $commentText.focus(commentValid).keyup(commentValid).keyup(save);


                function save() {
                    if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
                        $('#save').show();
                    } else {
                        $('#save').hide();
                    }


                }

http://jsfiddle.net/opfczh69/ js-fiddle在这里

Answer 1

您使用name s而不是其id引用文本框，因此它与任何内容都不匹配。

您需要将其引用为#textbox, #textbox1, #comment并为注释框指定id ：

 $('span').hide(); $('#save').hide(); $nameText = $('#textbox'); $companyText = $('#textbox1'); $commentText = $('#comment'); function nameValid() { if ($nameText.val().length < 5) { $('#name span').show(); } else { $('#name span').hide(); } } function companyValid() { if ($companyText.val().length < 3) { $('#company span').show(); } else { $('#company span').hide(); } } function commentValid() { if ($commentText.val().length < 1) { $('#review span').show(); } else { $('#review span').hide(); } } $nameText.focus(nameValid).keyup(nameValid).keyup(save); $companyText.focus(companyValid).keyup(companyValid).keyup(save); $commentText.focus(commentValid).keyup(commentValid).keyup(save); function save() { if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) { $('#save').show(); } else { $('#save').hide(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="add"> <div id="close"></div> <form action="" method="POST"> <div id="name"> Name:<span>Please Enter Full Name</span> <br/> <input type="text" name="name" id="textbox"> </div> <div id="company"> Company<span>Please Enter Company Name</span> <br/> <input type="text" name="company" id="textbox1"> </div> <div id="review"> Review<span>Please Enter Review</span> <br/> <textarea name="comment" id="comment"></textarea> </div> <div id="save"> <input type="submit" name="submit"> </div> </form> </div> 

更新小提琴