Saya memiliki formulir dan tombol input; baik permintaan Ajax dan kode validasi data JQuery tidak berfungsi. Permintaan Ajax berfungsi dengan baik tetapi kode validasi data tidak menerima pengiriman formulir. Saya menggunakan tombol enter untuk mengirimkan formulir.

$(document).ready(function() {
  $(":submit").click(function(e) {
    var msg = $("#search").val();
    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: msg
      },
      dataType: 'json',
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
    e.preventDefault();
  });

  $('form').submit(function() {
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }
  });
});
<form action="index.php" method="post" id="myForm" autocomplete="on">
  <pre>

<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) { 
 echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>

<input type="submit" style="border:0; padding:0; font-size:0">

</pre>
</form>

<div class="content">

</div>
0
CGarden 19 Januari 2020, 16:54

2 jawaban

Jawaban Terbaik

Tidak memiliki dua acara. Miliki SATU acara dan biarkan acara itu menjadi formulir pengiriman

Mereka saling mengganggu

Pindahkan preventDefault ke atas atau formulir AKAN dikirimkan jika ada kesalahan dalam kode Anda

$(function() {
  $('form').on("submit", function(e) {
    e.preventDefault();
    $('#error').text(""); // reset
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }

    $.ajax({
      url: 'search.php',
      method: 'POST',
      data: {
        msg: name
      },
      dataType: 'json', 
      success: function(response) {
        $(".content").html("")
        $.each(response, function() {
          $.each($(this), function(i, item) {
            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
  });
});
2
mplungjan 19 Januari 2020, 16:13

Panggilan ajax Anda dilakukan terlebih dahulu karena terikat dengan acara klik tombol kirim. e.preventDefault() mencegah event submit agar tidak dipecat. Itu sebabnya fungsi validasi Anda tidak pernah dijalankan.

Saya hanya akan menggunakan fungsi validasi apa adanya dengan penambahan baris e.preventDefault(); dan menambahkan panggilan ajax ketika validasi berhasil. Saya kira itu yang Anda inginkan?

function doAjax() {
  console.log('look mom, i pretend i\'m doing an ajax call');
}

$('form').submit(function(e) {
  e.preventDefault();
  console.log("look mom, im validating!")
  var name = $.trim($("#search").val());

  if (name.match(/[^a-zA-Z0-9 ]/g)) {
    $('#error').text('Please enter letters and spaces only');
    return false;
  }

  if (name === '') {
    $('#error').text('Please enter some text');
    return false;
  }

  if (name.length > 0 && name.length < 3) {
    $('#error').text('Please enter more letters');
    return false;
  }

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

<form action="index.php" method="post" id="myForm" autocomplete="on">
  <pre>
    <input name="msg" id="search" type="text" autofocus value="">
    <span id=error></span>
    <input type="submit" style="border:0; padding:0; font-size:12">
  </pre>
</form>
1
Mark Baijens 19 Januari 2020, 14:10