ADD ALL Button is not making select remove validation as if something was selected

Question

I am having trouble in the IE11 browser to get my validation to work properly.

Basically what is going on is I have select lists, which when chosen show the selected values in another textarea to allow the users to be aware of which employee(s) or branch(es) is chosen. There are two buttons labeled "ADD ALL" and "Remove ALL".

The problem is if the form is submitted and the required fields are not chosen it shows they need to be chosen but when when you hit ADD ALL and it selects all the users it should no longer need validation. Since the ADD ALL button is being pressed it does not consider that as a selection made and still forces the user to click in the select and then re click the "ADD ALL" button.

Is there something in JS I can write that once the button is chosen the validation is no longer required again unless a user is not chosen upon submit or something?

In chrome it does it correctly but for some reason IE11 is complaining.

Any help would be greatly appreciated!

https://jsfiddle.net/aelliott/pu8kLmeb/

Steps:

In dropdown choose checklist stats
Select continue - don't fill out the form (validation for required fields appear.)
Select ADD ALL on either button
Validation does not disappear and form still cannot be submitted because selects think nothing has been chosen

CODE

function handleLocationChange() {
  var selected = [];

  loc.find("option:selected").each(function() {
    selected.push($(this).text());
  });

  selectedElement.val(selected.join("\n"));
}

function setLocationOptionsSelected(selected) {
  loc.find("option").prop("selected", selected);
  loc.change();
}


function setSelectedOnEmployeeOptions(selected) {
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}

function handleEmployeeNameChange() {
  var selected = [];
  EmployeeName.find("option:selected").each(function() {
    selected.push($(this).text());
  });
  selected1Element.val(selected.join("\n"));
}

This may be similar symptoms as the one described [here](https://stackoverflow.com/q/1637503/1575353) (bearing in mind that is a change handler and not triggering the event) — Sᴀᴍ Onᴇᴌᴀ, Sep 26 '17 at 15:15

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

After playing around with it and finding pages like this issue logged on github, I was able to add in a hack for IE - i.e. to set the selectedIndex property of the select list manually before adding all items (inspired by this answer).

function setLocationOptionsSelected(selected) {
  if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
    loc.prop('selectedIndex', 0);
  }
  loc.find("option").prop("selected", selected);
  loc.change();
}
function setSelectedOnEmployeeOptions(selected) {
  if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
    EmployeeName.prop('selectedIndex', 0);
  }
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}

I would have used $.browser.msie but apparently that is deprecated AND not available in jQuery 1.10.

I did fork the fiddle but realize that is using the latest version of jQuery, and you said you couldn't upgrade from version 1.10, so this version uses jQuery 1.10.

Update

You mentioned that when the user clicks REMOVE ALL then the field does not appear as unselected and thus the form submit handling does not catch the field as invalid despite having the required attribute enabled. To handle this case, the IE specific code can be updated to set the selectedIndex to -1 when removing all options.

In the code below, the selected variable was removed from the conditionals, and moved into a ternary operator to decide the value to be passed as the second parameter of .prop().

function setLocationOptionsSelected(selected) {
  if (window.navigator.userAgent.indexOf('Trident') >= 0) {
    loc.prop('selectedIndex', (selected?0:-1));
  }
  loc.find("option").prop("selected", selected);
  loc.change();      
}

function setSelectedOnEmployeeOptions(selected) {
  if (window.navigator.userAgent.indexOf('Trident') >= 0) {
    EmployeeName.prop('selectedIndex', (selected?0:-1));
  }
  EmployeeName.find("option").prop("selected", selected);
  EmployeeName.change();
}

hey Sam this is super super close! but if i do those steps then remove a required field and still submit it allows the field to submit even though its required and empty — David Brierton, Sep 27 '17 at 01:50
if I use the removal all button it is not making it required again and still submitting — David Brierton, Sep 27 '17 at 14:30
https://chat.stackexchange.com/rooms/66155/discussion-between-david-brierton-and-sam-onela — Sᴀᴍ Onᴇᴌᴀ, Oct 02 '17 at 21:07

ADD ALL Button is not making select remove validation as if something was selected

1 Answers1

Update