jquery Validierung für leere text-Eingabe

Ich habe eine HTML Form enthält input-text-Felder, und wählen Sie tags.In jQuery ich sicher, dass meine input-Felder und wählt nicht leer, aber wenn einer von beiden leer ist, wird eine Fehlermeldung zeigen neben das leere Feld, und es funktioniert gut mit mir, aber mein problem, dass wenn das Eingabefeld leer war und dann fülle ich es , die Fehlermeldung nicht entfernen ,

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>

die wichtigste Aussage ist diese

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

und ich benutzte es , es funktioniert einfach mit select-tags, nicht mit input-text-Felder
der vollständige code

Hi,Bitte lade-code mal in jsfiddle so wird es leicht sein zu überprüfen, code. Dank
ich lade es schon
Ich glaube, Sie sollten keyup oder keydown-Funktion auf input Feld ein und klicken Sie Echtzeit wenn val() ist größer als null ist oder nicht. wenn val() = 0, Fehlermeldung wird angezeigt, im anderen Fall, entfernen message mit text(") oder val(").
diese Anweisung setzte ich es in die erste der code, so sollte es machen alle die Klasse errorMessage geht , richtig ?
ich schrieb das gleiche wie @Guillaume Alouege ...
danke für die Hilfe

InformationsquelleAutor William Kinaan | 2012-05-19

html jquery

Können Sie vereinfachen Sie den code wie folgt:

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

danke man, es funktioniert , ich akzeptiere ur Antwort

InformationsquelleAutor thecodeparadox

Müssen Sie dazu eine Schleife, die auf jede Eingabe in Ihrem code, den Sie prüfen nur die erste Eingabe, und Sie müssen den leeren span, falls die Eingabe nicht leer ist
ersetzen

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

durch

 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();
                }
            });