Make textbox required if a certain value is selected in dropdown box

This should work to make text input attribute required and add some red border if you select the val4 option from the select box only.

 var select = document.getElementById("SelectBox");
 var textBoxElement = document.getElementById("textbox");

 select.onchange = function(){

    var selectedString = select.options[select.selectedIndex].value;

    if(selectedString == 'val4'){

       textBoxElement.required = true;
       textBoxElement.style.border="1px solid red";

    }else{

       textBoxElement.required = false;
       textBoxElement.style.border="";
    }   
}

See working fiddle : https://jsfiddle.net/nwk1tkb7/5/

One approach I'd suggest is the following:

// 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 demo.

References:

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