Проверьте, является ли значение в поле ввода URL-адресом Instagram в blade.php - PullRequest
Новая
       36

Проверьте, является ли значение в поле ввода URL-адресом Instagram в blade.php

0 голосов
/ 14 февраля 2019

Я использую blade.php в своей разработке, и у меня есть проблема с проверкой, является ли ввод действительным URL-адресом Instagram.Я пытался сделать это: 

<form class="search_form" id="apply" action=" method="post">
    @csrf
    <label>
         <input type="url" pattern="https?://.+" required id="instagram" value="" placeholder="Instagram Post URL (Paste Here)">
    </label>
    <div class="flex_box">
         <button class="btn pink applyfnsh_btn" type="button" id="save">Confirm</button>
    </div>
</form>

ОБНОВЛЕНИЕ этот модальный отображается после проверки 

<div class="applyfnsh_modal">
    <div class="applyfnsh_box">
      <div class="modal_close">
         <img src="../../assets/images/close.png" alt="close">
       </div>
          <p>Success</p>
    </div>
</div>

modal.js 

$(".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");
    }
});

местоположение здесь 

<script src="{{ url('/assets/js/modal.js') }}"></script>

И, кстати, я использую ajax для сохранения данных в БД, чтобы страница не обновлялась. 

<script>
    $(document).on("click", "#save", function() {
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
            type: "post",
            url: '/contest/apply/{{ $contest->id }}',
            data: {url : $("#instagram").val(), user_id: 1, contest_id: {{ $contest->id }} },
            success: function(store) {

            },
            error: function() {

            }
        });
    });
  </script>

Это нене работает и даже обрабатывает данные при нажатии кнопки, даже если ввод не является URL-адресом или пустым.Есть ли способ сделать это без функции?

1 Ответ

0 голосов
/ 14 февраля 2019

вот оно: 

$(document).on("click", "#save", function() {
    
         var instagramLink = $('#instagramLink').val();
    var pattern = new RegExp('https://www.instagram.com/p/(.+?)', 'g');
    if((instagramLink != undefined || instagramLink != '') &&  instagramLink.match(pattern)){
    
       alert(instagramLink + 'is valid');
        /*
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: '/contest/apply/{{ $contest->id }}',
            data: {url :instagramLink, user_id: 1, contest_id: {{ $contest->id }} },
            success: function(store) {

            },
            error: function() {

            }
        });
        */
    }else{
       alert('Please Enter Valid Instagram Link');
       $('#instagramLink').val('');
        // show modal
       $('.applyfnsh_modal').modal('open');

    }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
<form class="search_form" id="apply" action="" method="post">
   
    <label>
         <input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)" class="form-control"/>
    </label>
  
    <div class="flex_box">
         <button class="btn btn-primary" type="button" id="save">Confirm</button>
    </div>
    
</form>

</body>
</html>

update-2: удалите существующие сценарии: 

$(".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");
    }
});

отобразите модально, используя этот способ, когда необходимо отобразить:

ОТКРЫТЬ МОДАЛЬ: $ ('. Applyfnsh_modal'). AddClass ('open');

ЗАКРЫТЬ МОДАЛЬ: $ ('. Applyfnsh_modal'). RemoveClass ('open');

так 

 if (validation successfull){
      // submit form using AJAX
   }else{
      $('.applyfnsh_modal').addClass('open');
   }

также создайте одну функцию для закрытия модального режима: 

$(document).on('click','.modal_close',function(){
     $('.applyfnsh_modal').removeClass('open');
});
...