Question

感谢您对此的帮助。我尝试使用其他问题的代码，但遗憾的是它不起作用。

如果两个特定字段为空，我正在尝试阻止表单提交并显示警报（“选择日期以便继续”）。在这种情况下，“ checkin ”＆amp; “的结帐”

这是第一个输入字段的代码：

<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

在输入元素上使用HTML5 必需属性，如果字段为空，则不会提交表单。要了解有关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

您可以做的第一件事就是根据需要标记结帐字段，jsut就像checkin这样会有所帮助。

其次，您可以在调试时使用临时警报跟踪您的值，这在寻找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

对特定的输入标签使用“必需”属性

只需在其下方输入type =“ submit”

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

完美的工作！！

阻止表单在某些字段为空时提交

6 个答案: