title: jquery validation modal is not showing after validation passed
body: <p>I have a form that upon using jquery validation, a modal pop will show. Unless there is validation error then it will not open the modal.</p>
  <p>Here is the code I wrote:</p>
  <pre><code>    @extends('layouts.dashboard.app')
  
  @section('content')
  
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;offset-1 col-5&quot;&gt;
          {{-- &lt;div class=&quot;row&quot;&gt;
              &lt;h4 style=&quot;font-weight: 700&quot;&gt;Regular Order : xxxx&lt;/h4&gt;
          &lt;/div&gt; --}}
          &lt;h4 style=&quot;font-weight: 700;margin-top:3rem;&quot;&gt;Pick-up Location&lt;/h4&gt;
          &lt;form method=&quot;POST&quot; action=&quot;&quot; id=&quot;order-form&quot;&gt;
            @csrf
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control @error('schedule_type') is-invalid @enderror&quot; value=&quot;Regular order&quot; style=&quot;border-radius:20px;&quot; id=&quot;scheduleType&quot; name=&quot;schedule_type&quot; readonly &gt;
                  @error('schedule_type')
                   &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                  @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                &lt;select class=&quot;form-control custom-select @error('hub') is-invalid @enderror&quot; name=&quot;hub&quot; style=&quot;border-radius:20px;&quot; id=&quot;hub&quot; &gt;
                  &lt;option disabled selected&gt;Choose a hub&lt;/option&gt;
                 
                  &lt;option value=&quot;xxx&quot;&gt;FUIYOH HUB KAJANG&lt;/option&gt;
                  &lt;option value=&quot;xxx&quot;&gt;FUIYOH HUB SG BULOH&lt;/option&gt;
                  &lt;option value=&quot;xxx&quot;&gt;FUIYOH HUB KAJANG&lt;/option&gt;
  
                &lt;/select&gt;
                @error('hub')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Pick-up date&quot; value=&quot;{{ old('pick_up_date') }}&quot; class=&quot;form-control @error('pick_up_date') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;pick_up_date&quot; id=&quot;pickupDate&quot; autocomplete=&quot;off&quot; &gt;
                @error('pick_up_date')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Pick-up time&quot; value=&quot;{{ old('pick_up_time') }}&quot; class=&quot;form-control @error('pick_up_time') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;pick_up_time&quot; id=&quot;pickupTime&quot; autocomplete=&quot;off&quot; &gt;
                @error('pick_up_time')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                  &lt;input type=&quot;text&quot; value=&quot;8&quot; class=&quot;form-control&quot; style=&quot;border-radius:20px;&quot; name=&quot;weight&quot; id=&quot;weight&quot; readonly&gt;
                @error('weight')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-7&quot;&gt;
                  &lt;textarea class=&quot;form-control&quot;  id=&quot;&quot; cols=&quot;30&quot; rows=&quot;4&quot; style=&quot;border-radius: 20px;&quot; name=&quot;delivery_note&quot; placeholder=&quot;Delivery Note(optional)&quot;&gt;&lt;/textarea&gt;
                @error('delivery_note')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-6&quot;&gt;   
          &lt;h4 style=&quot;font-weight: 700;margin-top:3rem;&quot;&gt;Delivery Location&lt;/h4&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Recipient Address&quot; value=&quot;{{ old('recipient_address') }}&quot; class=&quot;form-control @error('recipient_address') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;recipient_address&quot; id=&quot;recipientAddress&quot; &gt;
                  @error('recipient_address')
                   &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                  @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;text&quot; placeholder=&quot;City&quot; class=&quot;form-control @error('city') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;city&quot; id=&quot;city&quot; &gt;
                @error('city')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-4&quot;&gt;
                  &lt;input type=&quot;text&quot;  value=&quot;xxx&quot; class=&quot;form-control @error('state') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;state&quot; id=&quot;state&quot; readonly&gt;
                @error('state')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
              &lt;div class=&quot;form-group col-md-4&quot;&gt;
                  &lt;input type=&quot;text&quot;  value=&quot;58200&quot; class=&quot;form-control @error('postcode') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;postcode&quot; id=&quot;postcode&quot; readonly &gt;
                @error('postcode')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Delivery Date&quot; value=&quot;{{ old('delivery_date') }}&quot; class=&quot;form-control @error('delivery_date') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;delivery_date&quot; id=&quot;deliveryDate&quot; autocomplete=&quot;off&quot; &gt;
                @error('delivery_date')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;select class=&quot;form-control custom-select @error('delivery_time') is-invalid @enderror&quot; name=&quot;delivery_time&quot; id=&quot;deliveryTime&quot; style=&quot;border-radius:20px;&quot; autocomplete=&quot;off&quot; &gt;
                      &lt;option disabled selected&gt;Delivery time&lt;/option&gt;
                     
                      &lt;option value=&quot;xxx&quot;&gt;9.00AM-11.00AM&lt;/option&gt;
                      &lt;option value=&quot;xxx&quot;&gt;11.00AM-1.00PM&lt;/option&gt;
                      &lt;option value=&quot;xxx&quot;&gt;1.00PM-3.00PM&lt;/option&gt;
                      &lt;option value=&quot;xxx&quot;&gt;3.00PM-5.00PM&lt;/option&gt;
      
                    &lt;/select&gt;
                    @error('delivery_time')
                    &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                    @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Recipient Name&quot; value=&quot;{{ old('recipient_name') }}&quot; class=&quot;form-control @error('recipient_name') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;recipient_name&quot; id=&quot;recipientName&quot;  &gt;
                @error('recipient_name')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;text&quot;  placeholder=&quot;Recipient Contact Number (e.g 0135672839)&quot; value=&quot;{{ old('recipient_contact_number') }}&quot; class=&quot;form-control @error('recipient_contact_number') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;recipient_contact_number&quot; id=&quot;recipientContactNumber&quot;  &gt;
                @error('recipient_contact_number')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-8&quot;&gt;
                  &lt;input type=&quot;email&quot;  placeholder=&quot;Recipient Email&quot; value=&quot;{{ old('recipient_email') }}&quot; class=&quot;form-control @error('recipient_email') is-invalid @enderror&quot; style=&quot;border-radius:20px;&quot; name=&quot;recipient_email&quot; id=&quot;recipientEmail&quot;  &gt;
                @error('recipient_email')
                &lt;small class=&quot;form-text text-danger&quot;&gt;{{ $message }}&lt;/small&gt;
                @enderror
              &lt;/div&gt;
            &lt;/div&gt;
         
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group offset-md-3&quot;&gt;
                  &lt;button type=&quot;submit&quot; id=&quot;order-btn&quot;  class=&quot;btn proceed-button&quot; style=&quot;min-width: 200px;&quot;  data-toggle=&quot;modal&quot;&gt;Proceed&lt;/button&gt;  
              &lt;/div&gt;   
            &lt;/div&gt;
          &lt;/form&gt;   
      &lt;/div&gt;  
  &lt;/div&gt;
  
  
   &lt;!-- Modal --&gt;
   &lt;div class=&quot;modal fade&quot; id=&quot;confirmOrder&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;ModalCenterTitle&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; role=&quot;document&quot;&gt;
      &lt;div class=&quot;modal-content modal-content-height&quot;&gt;
        &lt;div class=&quot;modal-header&quot; style=&quot;background-color: #D0D0D0&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot;&gt;Order Confirmation&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;p&gt;Your credit balance will be charge RMxxx for the invoice. Proceed this order?&lt;/p&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Pay Now&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  label.error{
    color: red;
    font-size: 13px;
  }
  &lt;/style&gt;
  &lt;script&gt;
   
   // Validate form
  $(&quot;#order-form&quot;).validate({
    
    rules: {
        schedule_type:{
             required:true
        },
        hub:{
             required:true
        },
        pick_up_date:{
             required:true
        },
        pick_up_time:{
              required:true
        },
        weight:{
              required:true
        },
        recipient_address: {
            required: true,
            minlength: 3
        },
        city: {
            required: true
        },
        // state: {
        //     required: true
        // },
      
        // postcode: {
        //     required: true,
        //     postcode: true
        // },
        delivery_date: {
            required:true
        },
        delivery_time: {
            required:true
        },
        recipient_name:{
            required:true
        },
        recipient_contact_number:{
           required: true,
           digits:true,
           minlength: 10,
          maxlength: 15
        },
        recipient_email: {
            required: true,
            email: true
        }
     
  },
    messages: {
      schedule_type:{
             required:&quot;Please select a schedule type&quot;
        },
        hub:{
             required:&quot;Please choose a hub&quot;
        },
        pick_up_date:{
             required:&quot;Please select a pick up date&quot;
        },
        pick_up_time:{
              required:&quot;Please select a pick up time&quot;
        },
        weight:{
              required:&quot;Please enter the weight&quot;
        },
        recipient_address: {
            required: &quot;Recipient Address is required&quot;,
            minlength: &quot;Address must be more than 3 characters&quot;
        },
        city: {
            required: &quot;Please enter the recipient city&quot;
        },
        // state: {
        //     required: &quot;Please select a state&quot;
        // },
      
        // postcode: {
        //     required: &quot;Please select a postcode&quot;,
        //     postcode: &quot;Invalid postcode&quot;
        // },
        delivery_date: {
            required: &quot;Please select a delivery date&quot;
        },
        delivery_time: {
            required:&quot;Please select your delivery time range&quot;
        },
        recipient_name:{
            required:&quot;Please provide recipient name&quot;
        },
        recipient_contact_number:{
           required: &quot;Please provide recipient contact number&quot;,
           digits:&quot;Contact number should be in digits&quot;,
           minlength: &quot;Contact number length must be greater than 10&quot;,
           maxlength: &quot;Contact number length must be smaller than 15&quot;
        },
        recipient_email: {
            required: &quot;Please enter email&quot;,
            email: &quot;Email is not valid&quot;
        }
    }
  });
  
  // validate all the fields before showing modal
  $('#order-btn').click(function() {
  if (
      $(&quot;#order-form&quot;).validate().element('#scheduleType') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#hub') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#pickupDate') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#pickupTime') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#weight') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#recipientAddress') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#city') &amp;&amp;
      // $(&quot;#order-form&quot;).validate().element('#state') &amp;&amp;
      // $(&quot;#order-form&quot;).validate().element('#postcode') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#deliveryDate') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#deliveryTime') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#recipientName') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#recipientContactNumber') &amp;&amp;
      $(&quot;#order-form&quot;).validate().element('#recipientEmail') 
     
  ) {
      //show modal if validation passes
       //$('#confirmOrder').modal('show');
       //$('#confirmOrder').modal('toggle');
       alert('modal show');
       return true;
  } else {
       return false;
    }
  });
  
  &lt;/script&gt;
  
  
  
  
  @endsection
  </code></pre>
  <p>While the validation fails, the modal certainly behaves correctly but when I input all the fields and click on proceed, it does not show the modal and just has a flash of black in the background. I have tried using <code> $('#confirmOrder').toggle();</code> as well but no luck on that.</p>
  <p>Been stuck for some time so does anyone have any solution that might work?</p>