• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 60
  • Last Modified:

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

0
romsom
Asked:
romsom
  • 2
  • 2
2 Solutions
 
NorieVBA ExpertCommented:
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
 
romsomAuthor 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
 
romsomAuthor 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now