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

Question

Below shown my JS code and part of the HTML that i wish to create the form. I can't find the reason of why i CAN still submit it when there are fields that are not filled. It should pop up a dialog box according to which fields the user has not fill.

<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

check box validation was wrong . Iis is(':checked') .And apply the input validation simple with !input value its validate null , empty , undefined . .trim() remove the unwanted empty spaces .

if you have from tag try with onsubmit="return validation()" instead of onclick="validation" submit button. return false its stop the function execution when the input fails

 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

Try this, It will help you,

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

You need to add return false after every alert. then It will prevent submit event and also it will show the alert message of appropriate field which is first position in the form. If it is not filled immediately the submit event is prevent rest of the alert messages are not shown even the field is empty.

Answer 3

you need to catch the form submit event. The return false statement in the if conditions will stop the event. If everything goes fine, no return false statement will be executed and the form will be submitted.

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