title: Validate if value in input field is an Instagram URL in blade.php
body: <p>I am using <code>blade.php</code> in my development, and I have a concern in validating if the input is a valid instagram url. I have tried doing this:</p>
  
  <pre><code>&lt;form class="search_form" id="apply" action=" method="post"&gt;
      @csrf
      &lt;label&gt;
           &lt;input type="url" pattern="https?://.+" required id="instagram" value="" placeholder="Instagram Post URL (Paste Here)"&gt;
      &lt;/label&gt;
      &lt;div class="flex_box"&gt;
           &lt;button class="btn pink applyfnsh_btn" type="button" id="save"&gt;Confirm&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong> this modal is displayed after validation</p>
  
  <pre><code>&lt;div class="applyfnsh_modal"&gt;
      &lt;div class="applyfnsh_box"&gt;
        &lt;div class="modal_close"&gt;
           &lt;img src="../../assets/images/close.png" alt="close"&gt;
         &lt;/div&gt;
            &lt;p&gt;Success&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>modal.js</strong></p>
  
  <pre><code>$(".applyfnsh_btn").on("click", function(){
      $(".apply_modal").toggleClass("open");
      $(".applyfnsh_modal").toggleClass("open");
  });
  $(".applyfnsh_modal").on('click touchend', function(event) {
      if (!$(event.target).closest('.applyfnsh_box').length) {
      $(".applyfnsh_modal").toggleClass("open");
      $("body").toggleClass("open");
      }
  });
  </code></pre>
  
  <p>location is here</p>
  
  <pre><code>&lt;script src="{{ url('/assets/js/modal.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And by the way, I'm using ajax in saving data to db so that page is not refreshed.</p>
  
  <pre><code>&lt;script&gt;
      $(document).on("click", "#save", function() {
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
          $.ajax({
              type: "post",
              url: '/contest/apply/{{ $contest-&gt;id }}',
              data: {url : $("#instagram").val(), user_id: 1, contest_id: {{ $contest-&gt;id }} },
              success: function(store) {
  
              },
              error: function() {
  
              }
          });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>This isn't working and even processes the data when the button is clicked even if the input is not a url or empty.
  Is there a way to do it without making a function?</p>