Question

我在开发中使用blade.php，因此在验证输入内容是否为有效的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将数据保存到db，以便该页面不会刷新。

<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或为空。有没有做功能的方法吗？

Answer 1

在这里：

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

在需要显示时使用这种方式显示模式：

到OPEN MODAL：$（'。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');
});

验证输入字段中的值是否为blade.php

1 个答案: