How to prevent form submit 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.");
}

possible duplicate of http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery — Sudhansu Choudhary, Jun 19 '15 at 07:55

Tushar · Answer 1 · 2015-06-19T08:14:22.630

5

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

edited Jun 19 '15 at 08:14

answered Jun 19 '15 at 07:48

Tushar

85,780
21
159
179

score 0 · Answer 2 · answered Jun 19 '15 at 07:51

0

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

answered Jun 19 '15 at 07:51

areeb

424
3
9

score 0 · Answer 3 · answered Jun 19 '15 at 07:55

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

How to prevent form submit JQuery

3 Answers3