Prevent form from submitting when certain fields are empty

Question

I would appreciate your help on this one. I tried to use code from other questions, but unfortunately it doesn't work.

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 " checkin " & " checkout "

This is the code for the first input field:

<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="<?php echo $javascriptLocal ?>" data-date-language="<?php echo $language ?>"required>
<div class="input-group-addon search-icon-right" onclick="$('#checkin')[0].focus()" onfocus="$('#checkin')[0].focus()">

Code for the second field:

  <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="<?php echo $javascriptLocal ?>" data-date-language="<?php echo $language ?>"/>

<div class="input-group-addon search-icon-right" onclick="$('#checkout')[0].focus()" onfocus="$('#checkout')[0].focus()">

I tried to achieve it with this javascript:

<script type="text/javascript">
function empty() {
    var x;
    x = document.getElementById("checkout").value;
    if (x == "") {
        alert("Select dates to continue");
        return false;
    };
}
</script>

However, this does not work. Could your please help me?

EDIT: This is the Javascript that seems to interfere with my code: Any suggestions?

<script>$(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<=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>=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<=c;b++){h+=$("#child-age-"+b).val()+","}h=h.substr(0,h.length-1);j.append($('<input type="hidden" name="childages">').val(h));j.get(0).submit()})});</script>

Answer 1

Just change it to

if (!x) {
    alert("Select dates so continue");
    return false;
}

This will check if variable is null, empty, or undefined

Answer 2

Use HTML5 required attribute on the input elements, the form wont be submitted if the fields are empty. to learn more about html5 validation please visit http://www.the-art-of-web.com/html/html5-form-validation/

Answer 3

You can try like this:

$('form').on("submit",function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
  alert('Stopped');
})

Or by button

$('#submitButton').on("click",function(e) {
  e.preventDefault();
  alert('Stopped');
})

Answer 4

First thing you can do is mark your checkout field as required, jsut like checkin this would help.

Second you can trace your values with temporary alerts while debugging, this helped me a lot when looking for javascript issues.

Third you can try to use a strict comparaison operator and be a bit more specific with the function return values as such

<script type="text/javascript">
function empty() {
    var x = document.getElementById("checkin").value;
    var y = document.getElementById("checkout").value;

    if (x === "" || y === "") {
        alert("Select dates to continue");
        return false;
    };

    return true;

}
</script>

Answer 5

You can try something like this in javascript

if(!x){
    alert('Stopped');
}

In Javascript every variable can be evaluated as a boolean, so this will generally catch things that are empty, null, or undefined.

Hope it help

Answer 6

use the "required" attribute for the specific input tag

just give input type="submit" below that

<input type="number" 
 name="stock" 
 required
 onChange={(e)=>{this.setState({ quantity: e.target.value , number: val.qty})}}/>
 
<input type="submit" />

WORKS PERFECT!!!