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

Hi,Please upload code once in jsfiddle so it will be easy to check code. thanks — Er. Anurag Jain
– Er. Anurag Jain, Commented May 19, 2012 at 8:34
I think you should use keyup or keydown function on input field and check realtime if val() is greater than zero or not. if val() = 0, error message will be shown, in other case, remove message with text('') or with val(''). — Simon Dorociak
– Simon Dorociak, Commented May 19, 2012 at 8:54
@Sajmon $('span.errorMessage').text(''); this statement i put it in the first of the code so it should make all the class errorMessage goes , right ? — William Kinaan
– William Kinaan, Commented May 19, 2012 at 8:58

thecodeparadox · Accepted Answer · 2012-05-19 09:19:12Z

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

answered May 19, 2012 at 9:19

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillaume Alouege · Accepted Answer · 2012-05-19 09:04:35Z

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

Collectives™ on Stack Overflow

jquery validation for empty text input

jquery code

html code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

jquery code

html code

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related