help with javascript function

I have an HTML form with some checkboxes and a couple of required fields on it. I need the submit button to check that at least 1 checkbox is checked and the 2 required fields have values. Right now, clicking submit doesn't do anything on the form. Does the logic of the function and submit button look correct?

The Function:

<script type="text/javascript" language="javascript">
function validateFormFields() 
    {
		var checkboxes=0;
		
        if (document.getElementsByName('_1_1_2_1') == "")
        {
            alert('Please make a selection before submitting the form');
            return false;
        }
        else if (document.getElementsByName('_1_1_3_1').value == "")
        {
            alert('You must make a selection before form submission');
            return false;
        }
		else if 		
	   	(document.getElementsByName('_1_1_62_1').checked) ||(document.getElementsByName('_1_1_61_1').checked) ||
                (document.getElementsByName('_1_1_60_1').checked) ||(document.getElementsByName('_1_1_59_1').checked) ||
                (document.getElementsByName('_1_1_57_1').checked) ||(document.getElementsByName('_1_1_56_1').checked) ||
                (document.getElementsByName('_1_1_54_1').checked) ||(document.getElementsByName('_1_1_53_1').checked) ||
                (document.getElementsByName('_1_1_52_1').checked) ||(document.getElementsByName('_1_1_51_1').checked) ||
                (document.getElementsByName('_1_1_50_1').checked) ||(document.getElementsByName('_1_1_49_1').checked) ||
                (document.getElementsByName('_1_1_48_1').checked) ||(document.getElementsByName('_1_1_47_1').checked) ||
		{	
			checkboxes=1;
		}
		else if (checkboxes=0)
			{
				alert('You must check at least one box on the form');
				return false;
			}	   
		else
        {
            doFormSubmit(document.MyForm);
        }
    }
</script>

Open in new window

The Submit Button:

<TD ALIGN="LEFT">
<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Submit" NAME="IgnoreMe" ONCLICK="validateFormFields();">
<INPUT CLASS="resetButton" TYPE="RESET" VALUE="Reset"> 
</TD>

Open in new window

HTMLJavaScript

Last Comment

AxISQS

8/22/2022 - Mon

zephyr_hex (Megan)

11/8/2017

Given the following HTML

<form>
  <input type="text" required>
  <div>
    <label>Check One</label>
    <ul>
      <li>
        <input type="checkbox"> checkbox 1</li>
      <li>
        <input type="checkbox"> checkbox 2</li>
      <li>
        <input type="checkbox"> checkbox 3</li>
      <li>
        <input type="checkbox"> checkbox 4</li>
    </ul>
  </div>
  <button id="btnSubmit" type="button">
    Submit
  </button>
</form>

Open in new window

You could do something like:

function validateForm(obj) {
  var requiredElements = document.querySelectorAll("[required]");

  var valid = true;
  for (var i = 0; i < requiredElements.length; i++) {
    if (requiredElements[i].value === "") {
      valid = false;
    }
  }

  var checkboxElements = document.querySelectorAll('input[type=checkbox]');
  for (var i = 0; i < checkboxElements.length; i++) {
    if (checkboxElements[i].checked) {
      logResult(valid);
      return;
    }
  }
  logResult(false);
}

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener('click', validateForm);

function logResult(result) {
console.log(result);
}

Open in new window

If you're not opposed to jQuery, you could use a validation plugin: https://jqueryvalidation.org/
This option offers more robust and flexible validation. However, if you simply need to verify that required inputs have something in them, and that at least one checkbox is selected, you could use a simple validation like the one I have given you an example for.

Here's a Fiddle Demo: https://jsfiddle.net/zephyr_hex/f00n0yv8/

ASKER CERTIFIED SOLUTION

Julian Hansen

11/9/2017

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

AxISQS