JQUERY form validation not working properly

Question

Basically, when i type in either textarea or textbox the span should show until the criteria is made.

Only when all three are validated should the submit button "save" show().

however all that is happening is the first two textbox spans are showing when i start writing in them (however not from the focus) but do not disappear when the criteria is met

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

Answer 1

You are referencing your textboxes using the names not their ids so it doesnt match anything.

You need to reference them as #textbox, #textbox1, #comment and give the comment box an 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