验证输入和复选框

Question

I have a form where I need to validate only the checked checkboxes, their file and text input are filled. My issue is when two or more checkboxes are checked and one row is filled correctly, but the other or others aren't filled correctly, it submits with some errors.

I have been searching for a solution with no luck, here is my code:

function send()
{
$('input[type=checkbox]:checked').each(function () {
 var vals = $(this).val();
 var arch = document.getElementById(vals);
 var rcant = document.getElementById("ke"+vals); 

 if(arch.value==""){
    arch.required = true;
    alert("Please select the file to send");
    arch.focus();
 }else    
 if(rcant.value==""){
    rcant.required = true;
    alert("Please write the quantity to send");
    rcant.focus();
 }

 if(arch.value != "" && rcant.value != "")
 {
    formula.submit();
 }

});
}  

EDIT:

if two checkboxes are checked, one is filled but the other is blank, it trows me the error & focuses but it submits and the form do the work and the result I get sql warning and the email is filled with blank spaces that the inputs should be filled

Answer 1

The problem is that you submit the form inside the .each() loop, so it submits as soon as it finds one checkbox whose inputs are filled in correctly.

Instead, use a variable to keep track of whether you found any validation errors during the loop. Then check the variable at the end of the loop.

 function send() { var form_ok = true; $('input[type=checkbox]:checked').each(function() { var vals = $(this).val(); var arch = document.getElementById(vals); var rcant = document.getElementById("ke" + vals); if (arch.value == "") { arch.required = true; alert("Please select the file to send"); arch.focus(); form_ok = false; return false; // stop looping once we find an error } else if (rcant.value == "") { rcant.required = true; alert("Please write the quantity to send"); rcant.focus(); form_ok = false; return false; // stop looping once we find an error } }); if (form_ok) { formula.submit(); } }