Form focus on custom element when required hidden field is not filled

I have a form with a hidden required input element. I will be setting the value of this input through javascript based on some other computations.

If the value is empty and the form submits, I want the .focusable div to be focused instead.

Try removing the hidden attribute from the example below and submit the form (without entering any value in the input) to see what I mean. If the value of the hidden input is empty, the form should focus on the div instead of the input element. How can I do this using javascript?

.focusable {
  padding: 12px;
  border: 1px solid green;
  margin: 10px;
  border-radius: 3px;
}

.focusable:focus,
focusable:focus {
  outline: 2px solid green;
}

button {
  margin: 10px;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
  cursor: pointer;
  width: 150px;
}

form {
  text-align: center;
}

<form>
  <input required hidden />
  <div class="focusable">
    This div should focus when form is submitted
  </div>
  <button type="submit">Submit</button>
</form>