Opencart JS Validation on guest checkout

Question

I have added a few extras fields to guest checkout and some of them need validation. As, HTML input "required" doesn't appear to work in the "panel collapse " environment and the PHP validation is super-cryptic (for me anyway), has anybody used JS validation here. I have set up JS validation and it does alert when a field is left blank, but on closing the alert box, it moves onto payment_method without forcing a correction in the guest checkout. Before I dive too deep, is it an error in my JS validation, or is it a characteristic of "panel collapse", thereby forcing me to use PHP validation. Opencart v2.3.0.2 This code alerts to an empty field but moves onto payment_method on closing the alert box.

<form name="guest_form" >
  <tr>
    <td class="col-md-1">
      <div class="form-group required">
        <div class="col-sm-10">
          <input class="form-control" id="input-payment- 
              city" name="pickup_date" placeholder="**Collection Date" type="text" />
        </div>
      </div>
    </td>
  </tr>
  <div class="buttons">
    <div class="pull-right">
      <input type="button" value="<?php echo $button_continue; ?>" id="button-guest" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary" onclick="guestValid()" />
    </div>
  </div>
</form>
<script type="text/javascript">
  function guestValid()
  {
    var pickup_date = document.forms["guest_form"]["pickup_date"].value;

    if (pickup_date == "")
    {
      window.alert("Please select Collection Date");
      pickup_date.focus();
      return false;
    }
  }

</script>

Answer 1

Sorted the problem - The button was executing the validation function and then once the alert box was closed, it then continued with the click #button-guest in checkout.tpl. To resolve this, I put the validation in the checkout.tpl at the beginning of the #button-guest function.