Блог

Один из подходов, который я бы предложил, заключается в следующем:

 // use of a named function, to be called via Elememt.addEventListener:
function elementRequiredIf(event) {

  // 'this' will be the <select> element in this example, however
  // the 'this' is automatically passed from Element.addEventListener
  // (as is the 'event' object, though we don't use that here):
  var changed = this,

  // here we find the conditionally-required element, using
  // the id of the element stored in the custom data-* attribute
  // of the <select> element, here we retrieve that attribute-
  // value from the dataset object, stored as a property of the
  // Element:
    requiredElement = document.getElementById(changed.dataset.required_elem_id),

  // as above, we use the same approach to retrieve the
  // value that makes the other element required:
    ifRequiredValueIs = changed.dataset.required_if_value;

  // here we set the required property of the element to
  // true (if the <select> value is equal to the required
  // value, or false if they are unequal:
  requiredElement.required = changed.value === ifRequiredValueIs;
}

// here we find the <select> element via its id,
// and bind an event-listener for the 'change' event,
// which, upon a change event being fired, calls the
// named function (note the deliberate, required, lack
// of parentheses following the function name):
document.getElementById('SelectBox').addEventListener('change', elementRequiredIf);
  

 function elementRequiredIf() {
  var changed = this,
    requiredElement = document.getElementById(changed.dataset.required_elem_id),
    ifRequiredValueIs = changed.dataset.required_if_value;
  requiredElement.required = changed.value === ifRequiredValueIs;
}

document.getElementById('SelectBox').addEventListener('change', elementRequiredIf);  

 input:required {
  box-shadow: 0 0 0.5em #f00;
}  

 <form>
  <select id="SelectBox" name="SelectBox" data-required_elem_id="textbox" data-required_if_value="val4" required>
    <option value="">Please Select ...</option>
    <option value="val1">val1</option>
    <option value="val2">val2</option>
    <option value="val3">val3</option>
    <option value="val4">val4</option>
  </select>

  <input type="text" name="textbox" id="textbox">
  <button type="submit">Submit</button>
</form>  

Демонстрация JS Fiddle.

Ссылки:

• document.getElementById() .
• EventTarget.addEventListener() .
• HTMLElement.dataset .