當某些字段為空時阻止表單提交

Question

我將不勝感激您對此的幫助。 我嘗試使用其他問題中的代碼，但不幸的是它不起作用。

如果兩個特定字段為空，我試圖阻止表單提交並顯示警報（“選擇日期以便繼續”）。 在這種情況下，“簽入”和“簽出”

這是第一個輸入字段的代碼：

<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()">

第二個字段的代碼：

  <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()">

我試圖用這個 javascript 來實現它：

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

但是，這不起作用。 你能幫我嗎？

編輯：這是似乎干擾我的代碼的 Javascript：有什么建議嗎？

<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

只需將其更改為

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

這將檢查變量是否為空、空或未定義

Answer 2

在 input 元素上使用 HTML5 required屬性，如果字段為空，則不會提交表單。 要了解有關 html5 驗證的更多信息，請訪問http://www.the-art-of-web.com/html/html5-form-validation/

Answer 3

你可以這樣試試：

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

或者通過按鈕

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

Answer 4

您可以做的第一件事是根據需要標記您的結帳字段，就像簽入這樣會有所幫助。

其次，您可以在調試時使用臨時警報跟蹤您的值，這在查找 javascript 問題時對我有很大幫助。

第三，您可以嘗試使用嚴格的比較運算符，並對函數返回值進行更具體的處理

<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

你可以在javascript中嘗試這樣的事情

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

在 Javascript 中，每個變量都可以作為布爾值進行評估，因此這通常會捕獲空、空或未定義的內容。

希望有幫助

Answer 6

對特定輸入標簽使用“required”屬性

只需在下面給出 input type="submit"

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

工作完美！！！