jquery validation for empty text input

Question

I have a HTML Form contains input text fields and select tags.In jQuery I ensure that those input fields and selects aren't empty, but if one of them is empty, an error message will show beside that empty field and it works good with me, but my problem that if the input field was empty and then i fill it , the error message doesn't remove ,

jquery code

$(document).ready(function (){
    $("#aioForm").on('submit',function(e){
        var errorCount = 0;
        $('span.errorMessage').text('');
        $('#addIO select').each(function(){
            var $this = $(this);
            if(this.selectedIndex==0 ){
                var error = 'Please select a cell' ;
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        var input = $("#aioForm input").val();
        if(input==''){
            $("#aioForm input").next('span').text("fill the name please");
            errorCount= errorCount+1;
        }
        if(errorCount>0){
            e.preventDefault();
        }
        if(errorCount==0){
            $(this)[0].submit(); // submit form if no error
        }else
            return false;
    });
});

html code

<div id="addIO">
    <form id="aioForm" method="POST" action="<?php echo URL; ?>InformationObject/addIO">
        <ul id="ioAddul">
            <li class="ioAddli">
                <p>
                    <label>Concept</label>
                    <select id="ConceptSelect"></select>
                    <span class="errorMessage"></span>
                </p>
                <p>
                    <label>Name</label>
                    <input type="text" id="aioConceptName" name="name"  />
                    <span class="errorMessage"></span>
                </p>
            </li>
            <li class="ioAddli">
                <p>
                    <label>Concepts</label>
                    <a href="#" class="smallLink" id="aioShowLink">Show Concepts</a>
                </p>
                <div id="ioAddRelatedConcepts">
                </div>
            </li>
            <li class="ioAddli" id="ioAddContents">
                <p><label>Contents</label></p>
                <p>
                    <label class="ioAddOneContent">write one info</label>
                    <input name="contents[]" type="text" class="longInput"/>
                    <span class="errorMessage"></span>
                    <a href="" class="smallLink" onclick="return ioAddNewContent(this)">new info</a>
                </p>
            </li>
            <li class="ioAddli"id="ioAddOtherRelation">
                <a href="" onclick="return ioAddSetOtherRelation(this)"class="smallLink">add other relation</a>
            </li>
            <li>
                <input type="submit" class="button1" value="save"/>
            </li>
        </ul>
    </form>
</div>

the most important statement is this

$('span.errorMessage').text('');

and i used it , it just works with select tags, not with input text fields the full code

Answer 1

You can simplify you code like following:

$(document).ready(function (){
    $("#aioForm").on('submit',function(e){
        var errorCount = 0;
        $('span.errorMessage').text('');
        // checkign for multiple select [now you have one]
        var select = $('#addIO select').filter(function(){
            return this.selectedIndex == 0;
        }).next('span').text('Please select a cell');
        // checking for inputs
        var input = $("#aioForm input[type=text]").filter(function() {
           return !this.value;
        }).next('span').text("fill the name please");
        // no error checking
        if(input.length==0 && select.length == 0){
            $(this)[0].submit(); // submit form if no error
        }
        e.preventDefault();
    });
});

DEMO

Answer 2

You need to do a loop on each input, in your code you check only the first input, and you need to empty the span if the input is not empty replace

  var input = $("#aioForm input").val();
    if(input==''){
        $("#aioForm input").next('span').text("fill the name please");
        errorCount= errorCount+1;
    }

by

 var inputs = $("#aioForm input");
            inputs.each(function(index, value) {
                var input = $(this).val();
                if(input==''){
                    $(this).next('span').text("fill the name please");
                    errorCount= errorCount+1;
                } else {
                    $(this).next('span').empty();
                }
            });

Good luck