CODEWITHSUNDEEP
javascripthtmlvalidation
user3423283
user3423283

Reputation: 57

simple "select" validation in javascript not working

I am stuck with my simple "select" validation by javascript.

Problem is: when validating "select", it does not shows select options to users after validation error

"select is not enabaling back for user to select options after validation displayed"

HTML:

<div class="form-group">    

<label for="exampleInputArea">Area</label>
    <select style="color:#000 !important" class="form-control" id="exampleInputArea" placeholder="Select Month" name="exampleInputArea">
        <option value="" >--Select Area--</option>
        <option value="Area1">Area1</option>
        <option value="Area2">Area2</option>
        <option value="Area3">Area3</option>

    </select>
    <div style="color:red;" id="areaerror"></div>
</div>

<div class="form-group last">
    <button class="btn btn-lg btn-red mailbtn">Submit</button>
</div>

JS:

$('.mailbtn').live('click',function(){

area = $('#exampleInputArea').val();

if(area.lenght==0 || area=='')
        {
            $('#exampleInputArea').html('')
            $('#areaerror').text('Area is Required');
            return false;
        } else { 
            $('#areaerror').text('');
            return true;
        }

$.ajax({
        type: "POST",
        async : false,
        url: "mail.php",
        data: {area:area}
        })
        .done(function( msg ) {
        $('.mail_middle').html('');
        $('.mail_middle').html('We will call you to confirm your delivery address.<br/>Thank you.');
        return false;
        });
});

Here is my js fiddle link: FIDDLE

Please do help me with solution, as it is wasting my time...

Upvotes: 0

Views: 116

Answers (3)

rajesh kakawat
rajesh kakawat

Reputation: 10896

change your code to below one,FIDDLE

if (area.length == 0 || area == '') {
    $('#exampleInputArea').val('')
    $('#areaerror').text('Area is Required');
    return false;
} else {
    $('#areaerror').text('');
}

YOUR ERROR

  1. it is length not lenght
  2. On error select val('') not html(''), by val('') it will select your value to blank which is your default and by html('') it will replace html (ie option) of your select to blank.
  3. On successfull don't return it because you have to perform ajax functionality, by return true it will return your function not performing your ajax functionality.

Upvotes: 2

aelor
aelor

Reputation: 11116

your code has some errors : 

$('.mailbtn').on('click',function(){    
    var area = $('#exampleInputArea').val();
    console.log(area);
    if(area.length==0 || area=='')
            {
                $('#areaerror').text('Area is Required');
                return false;
            } else { 
                $('#areaerror').text('');
                return true;
            }

so better use my code and here is the updated fiddle :

http://jsfiddle.net/aelor/7zPgf/3/

This will send the ajax only when any area is selected or else it will simply show the validation message

Upvotes: 1

kag
kag

Reputation: 144

try this [http://jsfiddle.net/7zPgf/1/][1] live was not an good aproach. try on.

 [1]: http://jsfiddle.net/7zPgf/1/

Upvotes: 0

Related Questions