在用戶提交表單之前，如何檢查文本框和復選框是否已填寫並選中？

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簡單地應用輸入驗證，其validate為null ， empty和undefined 。 .trim()刪除不需要的空格。

如果您from標記，請嘗試使用onsubmit="return validation()"代替onclick="validation"提交按鈕。 return false當輸入失敗時停止函數執行

 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') } } 

 <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> 

Answer 2

試試這個，它將為您提供幫助，

 $("#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; } }); 

 <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> 

您需要在每個警報后添加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();
});