0

I have simple page with multiple check boxes and radio buttons, This is only validating the first system check box and skipping over the next comm check box. I'm fairly new to js and I'm sure this is a simple fix. Any assistance would be appreciated thanks!!!

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
      alert('Please select System Access');
      return false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
      alert('Please choose a Department');
      return false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
      alert('Please select Comm Access');
      return false;
    }

    return true;
  }

How can I get this to validate multiple check boxes? Will I also need to apply the same fix for multiple sets of radio buttons?

Improve this question

2 Answers 2

Reset to default
1

I think the problem is that you're returning from the function too soon. Try this:

function test() {
    var valid = true;

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
        alert('Please select System Access');
        valid = false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
        alert('Please choose a Department');
        valid = false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
        alert('Please select Comm Access');
        valid = false;
    }

    return valid;
}

This way, it validates everything you want, alerts what you need, and returns the validity like you expect.

Another option, which instead of alerting for each validation, you can do something like this:

function test() {
    var valid = true;
    var messages = [];

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
        messages.push('Please select System Access');
        valid = false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
        messages.push('Please choose a Department');
        valid = false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
        messages.push('Please select Comm Access');
        valid = false;
    }

    if (messages.length > 0) {
        alert(messages.join("\n"));
    }

    return valid;
}

In this case, you get one alert at the end with all the errors. Might be nicer for the user.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for the quick response, going with the first solution, this works, however there is still one small hurdle, just messing around with the page, I am able to, for example enter a checkbox for comm and enter a radio button for department, hit submit and it goes through. It seems if I enter only two out of the 3 it still submits, how can I modify this to not allow submission when all fields are not entered?
@AndrewGillium No problem. Well, I'm not exactly sure how you're using this, I was just trying to fix the immediate problem (which doesn't seem complete). If you could provide more of your code and how it's used, or at least a jsFiddle, that would help
0 
    <script defer="defer" type="text/javascript"><!--function validateForm(formElement) {
if (formElement.first_name.value.length < 2)
  return focusElement(formElement.first_name,
   'Please enter a First Name that is at least 2 characters long.');
if (formElement.last_name.value.length < 2)
  return focusElement(formElement.last_name,
   'Please enter a Last Name that is at least 2 characters long.');
if (formElement.model_id.value.length < 7)
  return focusElement(formElement.model_id,
   'Please enter a Model ID that is at least 7 characters long.');
if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
  alert('Please select System Access');
  return false;
}
if (countSelected(formElement, 'radio', 'department') == 0) {
  alert('Please choose a Department');
  return false;
}

if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
  alert('Please select Comm Access');
  return false;
}
return true; } function focusElement(element, errorMessage) {
alert((errorMessage.length > 0) ? errorMessage :
  'You did not enter valid data; Please try again');
if (element.select) element.select();
if (element.focus) element.focus();
return false; } function countSelected(formElement, inputType, inputName) {
if (inputType == null) inputType = 'checkbox';
var returnValue = 0;
for (var loopCounter = 0; loopCounter < formElement.length; loopCounter++) {
  var element = formElement.elements[loopCounter];
  if (element.type == inputType && element.checked == true) {
    if (inputName.length > 0)
      if (element.name == inputName)
        returnValue++;
    else
      returnValue++
  }
}
return returnValue; } function countSelectedOptions(selectElement) {
var returnValue = 0;
for (var loopCounter = 0; loopCounter < selectElement.options.length; loopCounter++)
  if (selectElement.options[loopCounter].selected == true)
    returnValue++;
return returnValue;

} //-->

Improve this answer

3 Comments

Sorry about the format, I think it has something to do with my loop counter but I'm not sure where? //I was just trying to fix the immediate problem// You most certainly did. THANKS!!
I don't know if this would be a problem, but the for loop in your countSelected function might need to be: for (var loopCounter = 0; loopCounter < formElement.elements.length; loopCounter++)
I gave that a shot, no go unfortunately, the problem seems to be that once a check box is checked, it doesn't go on to validate the other check boxes, it has the same issue with the radio buttons, so if I enter the first check box and the first radio button, it allows submission. I went ahead and put up a fiddle jsfiddle.net/DrewG85/yYPSS Thanks again for the assistance!!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.