title: Prevent form from submitting when certain fields are empty
body: <p>I would appreciate your help on this one. I tried to use code from other questions, but unfortunately it doesn't work.</p>
  
  <p>I am trying to prevent a form from submitting and show an alert ("Select dates so continue")if two specific fields are empty. In this case "<strong>checkin</strong>" &amp; "<strong>checkout</strong>"</p>
  
  <p><strong>This is the code for the first input field:</strong></p>
  
  <pre><code>&lt;input type="text" id="checkin" readonly="true" name="checkin" class="form-control search-input" placeholder="Check-in date" data-provide="datepicker-inline" data-date-orientation="bottom" data-date-autoclose="true" data-date-start-date="now" data-date-format="&lt;?php echo $javascriptLocal ?&gt;" data-date-language="&lt;?php echo $language ?&gt;"required&gt;
  &lt;div class="input-group-addon search-icon-right" onclick="$('#checkin')[0].focus()" onfocus="$('#checkin')[0].focus()"&gt;
  </code></pre>
  
  <p><strong>Code for the second field:</strong></p>
  
  <pre><code>  &lt;input type="text" readonly="true" id="checkout" name="checkout" class="form-control search-input" placeholder="Check-out date" data-provide="datepicker-inline" data-date-orientation="bottom" data-date-autoclose="true" data-date-start-date="now" data-date-format="&lt;?php echo $javascriptLocal ?&gt;" data-date-language="&lt;?php echo $language ?&gt;"/&gt;
  
  &lt;div class="input-group-addon search-icon-right" onclick="$('#checkout')[0].focus()" onfocus="$('#checkout')[0].focus()"&gt;
  </code></pre>
  
  <p><strong>I tried to achieve it with this javascript:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  function empty() {
      var x;
      x = document.getElementById("checkout").value;
      if (x == "") {
          alert("Select dates to continue");
          return false;
      };
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>However, this does not work. Could your please help me?</p>
  
  <p><strong><em>EDIT:
  This is the Javascript that seems to interfere with my code: Any suggestions?</em></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;$(document).ready(function(){$(".gotop").on("click",function(){$("html, body").animate({scrollTop:$("body").offset().top},1000)});$("#child").on("change",function(){var a=$(this).val();if(a&lt;=0){$(".child-age-1-container").fadeOut("slow");$(".child-age-2-container").fadeOut("slow");$(".child-age-3-container").fadeOut("slow");$(".child-age-4-container").fadeOut("slow");$("#child-age-1").val(0);$("#child-age-2").val(0);$("#child-age-3").val(0);$("#child-age-4").val(0)}else{if(a==1){$(".child-age-1-container").fadeIn("slow");$(".child-age-2-container").fadeOut("slow");$(".child-age-3-container").fadeOut("slow");$(".child-age-4-container").fadeOut("slow");$("#child-age-2").val(0);$("#child-age-3").val(0);$("#child-age-4").val(0)}else{if(a==2){$(".child-age-1-container").fadeIn("slow");$(".child-age-2-container").fadeIn("slow");$(".child-age-3-container").fadeOut("slow");$(".child-age-4-container").fadeOut("slow");$("#child-age-3").val(0);$("#child-age-4").val(0)}else{if(a==3){$(".child-age-1-container").fadeIn("slow");$(".child-age-2-container").fadeIn("slow");$(".child-age-3-container").fadeIn("slow");$(".child-age-4-container").fadeOut("slow");$("#child-age-4").val(0)}else{if(a&gt;=4){$(".child-age-1-container").fadeIn("slow");$(".child-age-2-container").fadeIn("slow");$(".child-age-3-container").fadeIn("slow");$(".child-age-4-container").fadeIn("slow")}}}}}});$("#checkin").datepicker().on("changeDate",function(){var a=$("#checkin").datepicker("getDate");a.setDate(a.getDate()+2);$("#checkout").datepicker("setDate",a);$("#checkout")[0].focus()});$(".btn-hotel-search").on("click",function(a){a.preventDefault();var j=$("#search-form");var g=$("#child-age-1").val();var f=$("#child-age-2").val();var e=$("#child-age-3").val();var d=$("#child-age-4").val();var b;var c=$("#child").val();var h="";for(b=1;b&lt;=c;b++){h+=$("#child-age-"+b).val()+","}h=h.substr(0,h.length-1);j.append($('&lt;input type="hidden" name="childages"&gt;').val(h));j.get(0).submit()})});&lt;/script&gt;
  </code></pre>