CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

simple jQuery validation failed

I want to validate my value, but doesnt quite work if someone could help me out

function countrySelectChanged() {
    $('.sub-menu').hide();
    var selectedCountry = $('#country-select').val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }
}
$(document).ready(function() {     
    $('#country-select').change(countrySelectChanged);
    countrySelectChanged();

    var valid;

    $('#click').click(function(){           
        if ($("#us-select").val() =="" || $("#germany-select").val() ==""  ){
            valid = false;
        } else {
            valid = true; 
        }

        if (!(valid)) {
            $('#msg').html('NOt Passed')
        } else {
            $('#msg').html('Pass')
        }
    });    
});

Here is HTML

<select id="country-select">
    <option value="none" >---</option>
    <option value="us" >US</option>
    <option value="germany">Germany</option>
</select>

<select id="us-select" class="sub-menu hide">
    <option value="none" >---</option>
    <option value="austin"  >Austin</option>
    <option value="austin2"  >Austin2</option>
</select>

<select id="germany-select" class="sub-menu hide">
    <option value="none" >---</option>
    <option value="berlin">Berlin</option>
    <option value="berlin2">Berlin2</option>
</select>

<select id="none-select" class="sub-menu hide">
    <option value="none" >---</option>
</select>

<a href="#" id="click">click me</a>
<div id="msg"></div>​

This is online version

http://jsfiddle.net/RPWPZ/14/

Upvotes: 1

Views: 130

Answers (3)

Tats_innit
Tats_innit

Reputation: 34107

Working Demo http://jsfiddle.net/SJ7Sg/ or http://jsfiddle.net/95zXa/

To get the selcted option you need to do this $("#us-select option:selected").val()

API => http://api.jquery.com/selected-selector/

Rest it should fit the cause :)

code

function countrySelectChanged() {
    $('.sub-menu').hide();
    var selectedCountry = $('#country-select').val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }
}
$(document).ready(function() {

    $('#country-select').change(countrySelectChanged);
       countrySelectChanged();

    var valid;

    $('#click').click(function(){

   if ($("#us-select option:selected").val() =="none"){

      valid = false;
            }else{
      valid = true;

   }


 if (valid) {
      $('#msg').html('Success')
       return false;
  } else {

      $('#msg').html('Fail')
  }


});


});






​

Upvotes: 1

Ngalam City
Ngalam City

Reputation: 112

you must change $("#us-select").val() =="" || $("#germany-select").val() =="" with $("#us-select").val() =="none" || $("#germany-select").val() =="none"

because your default value of select is "none" ->

<select id="country-select"> <option **value="none"** >---</option> <option value="us" >US</option> <option value="germany">Germany</option> </select>

Upvotes: 0

guolei
guolei

Reputation: 99

if ($('#country-select').val() =="us") {
  valid = false;
} else

Upvotes: 0

Related Questions