title: Using jQuery to prevent submit if field is empty and it return value zero even input contain data
body: <p>When I used jQuery to check that ship city not empty it work done if it empty and prevent submit but it also prevent submit when I fill in input as it always read value=0 even it contain data.</p>
  
  <pre><code>&lt;div class="form-group col-md-6"&gt;
                          &lt;div class="shipcountry"&gt;
                          &lt;b&gt; Select Country &lt;/b&gt;&lt;?php
                          echo "&lt;select required  name='shipcountry'  id='shipcountry' onchange='showCityship(this);'&gt;";
  
  
                          if(isset($row['ship_country'])) {
                              echo " &lt;option value='{$row["ship_country"]}' &gt;";
  
  
                              echo $row["ship_country"];
  
                              "&lt;/option&gt;";
                          } else {
                              echo "&lt;option  value=''&gt;Select&lt;/option&gt;";}
                          $query = 'SELECT * FROM `country_dhl` ';
                          $res_qu = mysql_query($query);
  
                          while ($country = mysql_fetch_array($res_qu)) {
  
  
                              echo " &lt;option value='{$country["country"]}'&gt;";
                              echo $country["country"];
  
  
                              echo "&lt;/option&gt;";
                          }
                          echo "&lt;/select&gt;";
                          ?&gt;
                      &lt;/div&gt;
  
      &lt;div class="form-group col-md-6" style="display: none;" id="othershipcountry"&gt;
   &lt;b&gt; City &lt;/b&gt;
   &lt;input type="text" name="shipcity" class="form-control"
          placeholder="Enter Your City"/&gt;
     &lt;/div&gt;
  
  &lt;div class="form-group col-md-6" style="display: none;" id="city_ship"&gt;
   &lt;input type="text" name="shipcity" class="form-control"
          placeholder="Enter Your City"/&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>jquery to show and hide div</p>
  
  <pre><code> $(document).ready(function() {
      $('#othershipcountry').show();
      $('#city_ship').hide();
      $('#othershipcity').hide();
  
      $('.shipcountry').click(function () {
          var selected = $(this).val();
          if(selected == 'Roma') {
              $('#othershipcountry').hide();
              $('#city_ship').show();
              $('#othershipcity').hide();
          } else {
              $('#othershipcountry').show();
              $('#city_ship').hide();
  
              $('#othershipcity').hide();
          }
      });
  });
  
  
  
  jquery  when submit
  
  $(document).ready(function() {
  
  
      $('#submit').click(function(e) {
  
         if ($('#city_ship').css('display') != 'none') {
  
              var ship =  $('#city_ship').val();
              if (ship.length === 0) {
                  console.log("city");
                  alert("You must choose your Ship city ");
                  e.preventDefault();
              }
          }
          if ($('#othershipcountry').css('display') == 'block') {
              var ship = $('#othershipcity').val();
              if (ship.length === 0) {
                  console.log("othercity");
                  alert("You must fill Ship city");
  
                  e.preventDefault();
              }
              else{
                  console.log("other");
              }
          }
  
      });
  });
  </code></pre>