JavaScript validation of a group of dropdown menus

Hi Experts,
I have 4 dropdown menus in my form. I would like to validate it so that the user must select at least one dropdown in order to submit the form.
If none of the dropdown menus are selected, a message should appear with the text "Please select at least one item".
Unfortunately the code below is not working in Internet Explorer, and the message is displayed next to each dropdown. I would like the message be displayed only once under the submit button. Is it possible to achieve this with JavaScript or jQuery? I would appreciate your help.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>

<script>
  $().ready(function() {
  
    $("#mydropdowns").validate({
      rules: {
      Affiliation: {
        require_from_group: [1, ".select-group"]
      },
      DeviceName: {
        require_from_group: [1, ".select-group"]
      },
      AliasName: {
        require_from_group: [1, ".select-group"]
      },
      DeviceAccountID: {
        require_from_group: [1, ".select-group"]
      }
      },

    });

  });
  </script>

</head>
<body>
<div id="Affiliation" class="select-group"><div>

<form id="mydropdowns" method="POST" action="../Search/SearchResults.asp">
  <select name="Affiliation" id="Affiliation" class="select-group">
  <option value=""></option>
  <option value="VER">VER</option>
  <option value="TIR">TIR</option>
  <option value="SAV">SAV</option>
  <option value="ASE">ASE</option>
</select>
  <select name="DeviceName" id="DeviceName" class="select-group">
  <option value=""></option>
  <option value="100968_FILE1">100968_FILE1</option>
  <option value="101324_FILE1">101324_FILE1</option>
  <option value="101325_FILE1">101325_FILE1</option>
  <option value="101333_FILE1">101333_FILE1</option>
</select>
<select name="AliasName" id="AliasName" class="select-group">
  <option value=""></option>
  <option value="021850">021850</option>
  <option value="024803">024803</option>
  <option value="026294">026294</option>
  <option value="050403">050403</option>
</select>
<select name="DeviceAccountID" id="DeviceAccountID" class="select-group">
  <option value=""></option>
  <option value="100968">100968</option>
  <option value="101324">101324</option>
  <option value="101333">101333</option>
  <option value="101335">101335</option>
</select>
  <br/><br/>
  <input type="submit" value="submit" />
</form>
</div>
</body>
</html>

Open in new window

romsomIT DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NorieAnalyst Assistant Commented:
Perhaps this might get you started.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>

<script>
  $().ready(function() {
  
    $("#mydropdowns").validate({
	
	  groups: {
	      all:"Affiliation DeviceName AliasName DeviceAccountID"
	  },
      rules: {
      Affiliation: {
        require_from_group: [1, ".all"]
      },
      DeviceName: {
        require_from_group: [1, ".all"]
      },
      AliasName: {
        require_from_group: [1, ".all"]
      },
      DeviceAccountID: {
        require_from_group: [1, ".all"]
      }
      },
	  messages:{
	   Affiliation: {
        require_from_group: "Fill at least one field"
      },
      DeviceName: {
        require_from_group: "Fill at least one field"
      },
      AliasName: {
        require_from_group: "Fill at least one field"
      },
      DeviceAccountID: {
        require_from_group: "Fill at least one field"
      }
	  },
    });

  });
  </script>

</head>
<body>
<div id="Affiliation" class="select-group"><div>

<form id="mydropdowns" method="POST" action="../Search/SearchResults.asp">
  <select name="Affiliation" id="Affiliation" class="all">
  <option value=""></option>
  <option value="VER">VER</option>
  <option value="TIR">TIR</option>
  <option value="SAV">SAV</option>
  <option value="ASE">ASE</option>
</select>
  <select name="DeviceName" id="DeviceName" class="all">
  <option value=""></option>
  <option value="100968_FILE1">100968_FILE1</option>
  <option value="101324_FILE1">101324_FILE1</option>
  <option value="101325_FILE1">101325_FILE1</option>
  <option value="101333_FILE1">101333_FILE1</option>
</select>
<select name="AliasName" id="AliasName" class="all">
  <option value=""></option>
  <option value="021850">021850</option>
  <option value="024803">024803</option>
  <option value="026294">026294</option>
  <option value="050403">050403</option>
</select>
<select name="DeviceAccountID" id="DeviceAccountID" class="all">
  <option value=""></option>
  <option value="100968">100968</option>
  <option value="101324">101324</option>
  <option value="101333">101333</option>
  <option value="101335">101335</option>
</select>
  <br/><br/>
  <input type="submit" value="submit" />
</form>
</div>
</body>
</html>

Open in new window


By the way, this works for me in IE and Chrome.
0
romsomIT DeveloperAuthor Commented:
Thank you Norie!
The problem is that when I put the dropdowns in a table, the message pushes the TD wide, and it doesn't look good on my page.
I'd rather have one popup window, or a message that I can place anywhere on the page. I wonder if this can be done with JavaScript? I tried on different computers, and it still doesn't work in Internet Explorer. Please see the code below, when the form is in a table:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>

<script>
  $().ready(function() {
  
    $("#mydropdowns").validate({
	
	  groups: {
	      all:"Affiliation DeviceName AliasName DeviceAccountID"
	  },
      rules: {
      Affiliation: {
        require_from_group: [1, ".all"]
      },
      DeviceName: {
        require_from_group: [1, ".all"]
      },
      AliasName: {
        require_from_group: [1, ".all"]
      },
      DeviceAccountID: {
        require_from_group: [1, ".all"]
      }
      },
	  messages:{
	   Affiliation: {
        require_from_group: "Fill at least one field"
      },
      DeviceName: {
        require_from_group: "Fill at least one field"
      },
      AliasName: {
        require_from_group: "Fill at least one field"
      },
      DeviceAccountID: {
        require_from_group: "Fill at least one field"
      }
	  },
    });

  });
  </script>

</head>
<body>
<div id="Affiliation" class="select-group"><div>

<form id="mydropdowns" method="POST" action="../Search/SearchResults.asp">

<table border="1"><tr><td>Affiliation</td><td>Device Name</td><td>Alias Name</td><td colspan="2">Device Account ID</td></tr>
<tr><td>

  <select name="Affiliation" id="Affiliation" class="all">
  <option value=""></option>
  <option value="VER">VER</option>
  <option value="TIR">TIR</option>
  <option value="SAV">SAV</option>
  <option value="ASE">ASE</option>
</select>
</td><td>
  <select name="DeviceName" id="DeviceName" class="all">
  <option value=""></option>
  <option value="100968_FILE1">100968_FILE1</option>
  <option value="101324_FILE1">101324_FILE1</option>
  <option value="101325_FILE1">101325_FILE1</option>
  <option value="101333_FILE1">101333_FILE1</option>
</select>
</td><td>
<select name="AliasName" id="AliasName" class="all">
  <option value=""></option>
  <option value="021850">021850</option>
  <option value="024803">024803</option>
  <option value="026294">026294</option>
  <option value="050403">050403</option>
</select>
</td><td>
<select name="DeviceAccountID" id="DeviceAccountID" class="all">
  <option value=""></option>
  <option value="100968">100968</option>
  <option value="101324">101324</option>
  <option value="101333">101333</option>
  <option value="101335">101335</option>
</select>
</td><td>
  <input type="submit" value="submit" />
  </td></tr></table>
</form>
</div>
</body>
</html>

Open in new window

0
Julian HansenCommented:
What version of IE - I just tested the code to your last question (https://www.experts-exchange.com/questions/29095347/jQuery-form-sumbission-if-at-least-one-dropdown-is-selected.html) on IE (9+) it works fine.

Here is a trick you can do. Style the label.error elements to look like a popup and then add a click handler for the document that checks to see if any errors are showing and then hides them.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>
<style>
label.error {
	display: block;
	position: absolute;
	top: 50%;
	left: 35%;
	width: 30%;
	padding: 20px;
	border: 1px solid #444;
	transform: translateY(-50%);
}
</style>
<script>
  $().ready(function() {
  
    $("#mydropdowns").validate({
	
	  groups: {
	      all:"Affiliation DeviceName AliasName DeviceAccountID"
	  },
      rules: {
      Affiliation: {
        require_from_group: [1, ".all"]
      },
      DeviceName: {
        require_from_group: [1, ".all"]
      },
      AliasName: {
        require_from_group: [1, ".all"]
      },
      DeviceAccountID: {
        require_from_group: [1, ".all"]
      }
      },
	  messages:{
	   Affiliation: {
        require_from_group: "Fill at least one field"
      },
      DeviceName: {
        require_from_group: "Fill at least one field"
      },
      AliasName: {
        require_from_group: "Fill at least one field"
      },
      DeviceAccountID: {
        require_from_group: "Fill at least one field"
      }
	  },
    });

  });
  $(function() {
	$(document).click(function() {
		if ($('label.error:visible').length) {
			$('label.error').hide();
		}
	});
  });
  </script>

</head>
<body>
<div id="Affiliation" class="select-group"><div>

<form id="mydropdowns" method="POST" action="../Search/SearchResults.asp">

<table border="1"><tr><td>Affiliation</td><td>Device Name</td><td>Alias Name</td><td colspan="2">Device Account ID</td></tr>
<tr><td>

  <select name="Affiliation" id="Affiliation" class="all">
  <option value=""></option>
  <option value="VER">VER</option>
  <option value="TIR">TIR</option>
  <option value="SAV">SAV</option>
  <option value="ASE">ASE</option>
</select>
</td><td>
  <select name="DeviceName" id="DeviceName" class="all">
  <option value=""></option>
  <option value="100968_FILE1">100968_FILE1</option>
  <option value="101324_FILE1">101324_FILE1</option>
  <option value="101325_FILE1">101325_FILE1</option>
  <option value="101333_FILE1">101333_FILE1</option>
</select>
</td><td>
<select name="AliasName" id="AliasName" class="all">
  <option value=""></option>
  <option value="021850">021850</option>
  <option value="024803">024803</option>
  <option value="026294">026294</option>
  <option value="050403">050403</option>
</select>
</td><td>
<select name="DeviceAccountID" id="DeviceAccountID" class="all">
  <option value=""></option>
  <option value="100968">100968</option>
  <option value="101324">101324</option>
  <option value="101333">101333</option>
  <option value="101335">101335</option>
</select>
</td><td>
  <input type="submit" value="submit" />
  </td></tr></table>
</form>
</div>
</body>
</html>

Open in new window

Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
romsomIT DeveloperAuthor Commented:
This is beautiful, thank you very much! For some reason the code you pasted in Experts Exchange is not working for me in Internet Explorer. But when I went to your site and copied the code from the working example, I could make it work on my computer as well. I'm really grateful for your help!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.