javascript - JQUERY 表单验证无法正常工作

Question

基本上，当我在文本区域或文本框中键入内容时，跨度应该显示，直到制定标准为止。

只有当所有三个都经过验证时，提交按钮才应“保存”show()。

然而，发生的一切是当我开始在其中写入时显示前两个文本框跨度(但不是从焦点)，但在满足条件时不会消失

       <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

您正在使用名称而不是它们的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>

Updated Fiddle