如何防止表单提交JQuery

Question

I wish to check if all the checkbox is not checked, it will prevent the form being submited. For example, I have 7 checkboxs(days) in the form and if user click submit button without check one of the checkboxs, it will display an error message and prevent the form being submited. If the user check the one of the check box, it will run the if-else below and if all is ok it will reduce the slot by 1. Any I idea how to do it?

JQuery code

var slot = 7;

$(".day").each(function(){
    if($(this).is(":checked")){ 

        var num = $('.day').index(this);

        if($("[name='sd_input_dosage_value[]']").eq(num).val() == ""){
            alert("The dosage is required and cannot be empty.");
            return false;
        }
        else if(!$.isNumeric($("[name='sd_input_dosage_value[]']").eq(num).val())){
            alert("The dosage is not a number.");
            return false;
        }
        else if(parseFloat($("[name='sd_input_dosage_value[]']").eq(num).val()) < 0){
            alert("The dosage cannot be a negative value.");
            return false;
        }
        else if($("[name='sd_dosage_select_value[]']").eq(num).val() == ""){
            alert("The dosage unit cannot be empty.");
            return false;                   
        }
        else if($("[name='sd_input_quantity_value[]']").val() == ""){
            alert("The quantity is required and cannot be empty.");
            return false;
        }
        else if(!$.isNumeric($("[name='sd_input_quantity_value[]']").val())){
            alert("The quantity is not a number.");
            return false;
        }
        else if(parseFloat($("[name='sd_input_quantity_value[]']").val()) < 0){
            alert("The quantity cannot be a negative value.");
            return false;
        }
        else{
            slot = slot -1;
        }

    }                   
});

if(slot == 7){
    alert("There must be a least one check box checked.");
}

Answer 1

You can use event.preventDefault() to prevent form from submitting;

Based on assumptions of your HTML structure:

// When form is submitted
$('form').on('submit', function(e) {

    // Get the number of checked checkboxes
    if ($('input[name="days[]"]:checked').length) {
        // Your code here
    } else {
        // Prevent form from submitting
        e.preventDefault();
    }
});

Answer 2

$("form").submit(function(){
   $(":input[type ^= checkbox]").each(function(){
      if(!$(this).is(":checked"))
      {
         alert("Message");
         return false;   
      }  
   });
})

Answer 3

Hi if you are trying to prevent the form from being submitted you try this one.

 $(function(){ $("#formid").submit(function(event){ var slot = 7; $(".day").each(function(){ if($(this).is(":checked")){ var num = $('.day').index(this); if($("[name='sd_input_dosage_value[]']").eq(num).val() == ""){ alert("The dosage is required and cannot be empty."); return false; }else if(!$.isNumeric($("[name='sd_input_dosage_value[]']").eq(num).val())){ alert("The dosage is not a number."); return false; }else if(parseFloat($("[name='sd_input_dosage_value[]']").eq(num).val()) < 0){ alert("The dosage cannot be a negative value."); return false; }else if($("[name='sd_dosage_select_value[]']").eq(num).val() == ""){ alert("The dosage unit cannot be empty."); return false; }else if($("[name='sd_input_quantity_value[]']").val() == ""){ alert("The quantity is required and cannot be empty."); return false; }else if(!$.isNumeric($("[name='sd_input_quantity_value[]']").val())){ alert("The quantity is not a number."); return false; }else if(parseFloat($("[name='sd_input_quantity_value[]']").val()) < 0){ alert("The quantity cannot be a negative value."); return false; }else{ slot = slot -1; } } }); if(slot == 7){ alert("There must be a least one check box checked."); event.preventDefault(); } }); });