CODEWITHSUNDEEP
javascript
user1722138
user1722138

Reputation:

How to validate multiple checkbox with javascript

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?

Upvotes: 0

Views: 2150

Answers (2)

user1722138
user1722138

Reputation: 

    <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;

} //-->

Upvotes: 0

Ian
Ian

Reputation: 50905

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.

Upvotes: 1

Related Questions