Question

下面显示了我的JS代码和我希望创建表单的HTML的一部分。我找不到为什么我还能在没有填充字段的情况下提交它的原因。它应该根据用户未填写的字段弹出一个对话框。

<script>
    function validation() {
        if( $('#sdate').val() == null ||  $('#sdate').val() == undefined || $('#sdate').val() == "" ){
            alert( 'Please fill in start date field');
        }
        if( $('#edate').val() == null || $('#edate').val() == undefined ||  $('#edate').val() == "" ){  
           alert( 'Please fill in end date field');
        }
        if( $('#agree').val() == null || $('#agree').val() == undefined || $('#agree').val() == ""){ 
            alert( 'Please indicate that you have satisfied all the requirements');
        }
    }
</script>

<div class="content-wrapper">
    <div class="sub-content">
        <div>
            <p>Start Date:</p>
            <input id="sdate" type="date" name="startdate">
        </div>
    </div>
    <div class="sub-content">
        <div>
            <p>End Date:</p>
            <input id="edate" type="date" name="enddate">
        </div>
    </div>
</div>

<div class="end-content">
    <div class="center-align">
        <div class="checklist">
            <p>By checking this box I agree that I have satisfied all requirements.</p>
            <input id="agree" type="checkbox" name="checkbox" class="tick-att">
        </div>
        <br>
        <div class="align-right">
             <input type="submit" class="button" name="submit" value="submit" onclick="validation()" >
        </div>
    </div>
</div>

Answer 1

复选框验证错误。 Iis is(':checked')。并将输入验证简单地应用于!input value，其验证null，empty，undefined。.trim()删除不需要的空格。

如果您有from代码，请尝试使用onsubmit="return validation()"代替onclick="validation"提交按钮。 return false当输入失败时停止执行函数

＆＃13;

function validation() {
  if (!$('#sdate').val().trim()) {
    alert('Please fill in start date field');
    return false // if you have a form tag
  }
  if (!$('#edate').val().trim()) {
    alert('Please fill in end date field');
        return false // if you have a form tag
  }
  if (!$('#agree').is(':checked')) {
    alert('Please indicate that you have satisfied all the requirements');
        return false // if you have a form tag
  }
  else{
  console.log('ok')
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return validation()">
<div class="content-wrapper">
  <div class="sub-content">
    <div>
      <p>Start Date:</p>
      <input id="sdate" type="date" name="startdate">
    </div>
  </div>
  <div class="sub-content">
    <div>
      <p>End Date:</p>
      <input id="edate" type="date" name="enddate">
    </div>
  </div>
</div>

<div class="end-content">
  <div class="center-align">
    <div class="checklist">
      <p>By checking this box I agree that I have satisfied all requirements.</p>
      <input id="agree" type="checkbox" name="checkbox" class="tick-att">
    </div>
    <br>
    <div class="align-right">
      <input type="submit" class="button" name="submit" value="submit" >
    </div>
  </div>
</div>
</from>

＆＃13;

Answer 2

试试这个，它会对你有帮助，

＆＃13;

$("#btn").click(function()
{		
        if( $('#sdate').val() == null ||  $('#sdate').val() == undefined || $('#sdate').val() == "" ){
            alert( 'Please fill in start date field');
            return false;
        }
        if( $('#edate').val() == null || $('#edate').val() == undefined ||  $('#edate').val() == "" ){  
           alert( 'Please fill in end date field');
           return false;
        }
       if(!document.getElementById('agree').checked) { 
            alert( 'Please indicate that you have satisfied all the requirements');
            return false;
        }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div class="content-wrapper">
    <div class="sub-content">
        <div>
            <p>Start Date:</p>
            <input id="sdate" type="date" name="startdate">
        </div>
    </div>
    <div class="sub-content">
        <div>
            <p>End Date:</p>
            <input id="edate" type="date" name="enddate">
        </div>
    </div>
</div>

<div class="end-content">
    <div class="center-align">
        <div class="checklist">
            <p>By checking this box I agree that I have satisfied all requirements.</p>
            <input id="agree" type="checkbox"  name="checkbox" class="tick-att">
        </div>
        <br>
        <div class="align-right">
             <input type="submit" id="btn" class="button" name="submit" value="submit" onClientClick="validation()" />
        </div>
    </div>
</div>
   </div>

＆＃13;

您需要在每次提醒后添加return false。然后它将阻止提交事件，并且它还将显示表格中第一个位置的相应字段的警报消息。如果没有立即填充，则提交事件将阻止其他警报消息显示，即使该字段为空。

Answer 3

您需要捕获表单提交事件。 if条件中的return false语句将停止该事件。如果一切顺利，将不会执行return false语句，并且将提交表单。

var validation = function() {
        if( $('#sdate').val() == null ||  $('#sdate').val() == undefined || $('#sdate').val() == "" ){
            alert( 'Please fill in start date field');
            return false;
        }
        if( $('#edate').val() == null || $('#edate').val() == undefined ||  $('#edate').val() == "" ){  
           alert( 'Please fill in end date field');
           return false;
        }
        if( !$('#agree').is(':checked') ){ 
            alert( 'Please indicate that you have satisfied all the requirements');
            return false;
        }
    }

$("form").submit(function(){
  validation();
});

在用户提交表单之前，如何检查文本框和复选框是否已填写并已检查？

3 个答案: