Форма Ajax обязательна для полей выбора и ввода

Question

Я новичок в этом, поэтому я не могу решить это с необходимыми полями в скрипте.

HTML-форма

 <form name="rezform" onsubmit="return validation()" id="loginForm" method="" action="" novalidate="novalidate">

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  function insertData() {
    var rez_ad = $("#rez_ad").val();
    var rez_saat = $("#rez_saat").val();
    var rez_gsm = $("#rez_gsm").val();
    var rez_tarih = $("#rez_tarih").val();
    var rez_email = $("#rez_email").val();
    var rez_tip = $("select#rez_tip").val();
    var rez_sayi = $("select#rez_sayi").val();
    var rez_aciklama = $("#rez_aciklama").val();

    // AJAX code to send data to php file.
    $.ajax({
      type: "POST",
      url: "rez/insert-data.php",
      data: {
        rez_ad: rez_ad,
        rez_saat: rez_saat,
        rez_gsm: rez_gsm,
        rez_email: rez_email,
        rez_tarih: rez_tarih,
        rez_tip: rez_tip,
        rez_sayi: rez_sayi,
        rez_aciklama: rez_aciklama
      },
      dataType: "JSON",
      success: function(data) {
        $("#message").html(data);
        $("#message").addClass("alert alert-success");
      },
      error: function(err) {
        alert(err);
      }
    });

  }
</script>

insert-data.php

/*
Developer: Ehtesham Mehmood
Site:      PHPCodify.com
Script:    Insert Data in PHP using jQuery AJAX without Page Refresh
File:      Insert-Data.php
*/
include('db.php');
$rez_ad=$_POST['rez_ad'];
$rez_saat=$_POST['rez_saat'];
$rez_gsm=$_POST['rez_gsm'];
$rez_email=$_POST['rez_email'];
$rez_tarih=$_POST['rez_tarih'];
$rez_tip=$_POST['rez_tip'];
$rez_sayi=$_POST['rez_sayi'];
$rez_aciklama=$_POST['rez_aciklama'];

$stmt = $DBcon->prepare("INSERT INTO rezervasyon(rez_ad,rez_saat,rez_gsm,rez_email,rez_tarih,rez_tip,rez_sayi,rez_aciklama) VALUES(:rez_ad, :rez_saat,:rez_gsm,:rez_email,:rez_tarih,:rez_tip,:rez_sayi,:rez_aciklama)");

$stmt->bindparam(':rez_ad', $rez_ad);
$stmt->bindparam(':rez_saat', $rez_saat);
$stmt->bindparam(':rez_gsm', $rez_gsm);
$stmt->bindparam(':rez_email', $rez_email);
$stmt->bindparam(':rez_tarih', $rez_tarih);
$stmt->bindparam(':rez_tip', $rez_tip);
$stmt->bindparam(':rez_sayi', $rez_sayi);
$stmt->bindparam(':rez_aciklama', $rez_aciklama);
if($stmt->execute())
{
  $res="Rezervasyonunuz tarafımıza ulaşmıştır. En yakın sürede girmiş olduğunuz GSM numaranıza dönüş yapılacaktır.";
  echo json_encode($res);
}
else {
  $error="Sistemsel bir hata meydana geldi lütfen bir süre sonra tekrar deneyiniz veya iletişime geçiniz.";
  echo json_encode($error);
}



 ?>

Таким образом, моя проблема в том, что когда я нажимаю кнопку «Отправить» для данных html / php, происходит mysql, даже если поля ввода и выбора пусты / не выбраны.Так что я должен сделать это как в поле ввода html или выбрать.Я не знаю, как сделать это правильно в JavaScript.Я нашел другой скрипт, но не смог работать так же, как и этот.Так, как я могу поставить обязательное поле для этого, и если вы можете объяснить это логикой, это было бы хорошо!

Также у нас есть хитрость для защиты ботов в форме javascript?

Спасибо!И хорошего дня.

Answer 1

@ alex тоже постить тоже самое. Я только исправил некоторые ошибки, которые у него были. как вернуть отправить. код ниже работает отлично.

<form action="index.php" onsubmit="return insertData()" method="POST">
   <input type="text" name="name" id="rez_ad">
   <input type="text" name="name" id="rez_saat">
   <input type="text" name="name" id="rez_gsm">
   <input type="text" name="name" id="rez_tarih">
   <input type="text" name="name" id="rez_email">
   <input type="text" name="name" id="rez_tip">
   <input type="text" name="name" id="rez_sayi">
   <input type="text" name="name" id="rez_aciklama">
   <input type="submit" name="" value="Send">
</form>

<div id="message"></div>

 function insertData() {

    submit = true;
          var rez_ad=$("#rez_ad").val();
          var rez_saat=$("#rez_saat").val();
          var rez_gsm=$("#rez_gsm").val();
          var rez_tarih=$("#rez_tarih").val();
          var rez_email=$("#rez_email").val();
          var rez_tip=$("#rez_tip").val();
          var rez_sayi=$("#rez_sayi").val();
          var rez_aciklama=$("#rez_aciklama").val();
   if(rez_ad == "" || rez_saat == "" || rez_gsm == "" || rez_tarih == "" || rez_email == "" || rez_tip == "" || rez_sayi == "" || rez_aciklama == "" ){
   $("#message").html("some field is empty!!");
   submit = false;

   return submit;

   }else{

        // AJAX code to send data to php file.
        $.ajax({
          type: "POST",
          url: "rez/insert-data.php",
          data: {rez_ad:rez_ad,rez_saat:rez_saat,rez_gsm:rez_gsm,rez_email:rez_email,rez_tarih:rez_tarih,rez_tip:rez_tip,rez_sayi:rez_sayi,rez_aciklama:rez_aciklama},
          dataType: "JSON",
          success: function(data) {
           $("#message").html(data);
           $("#message").addClass("alert alert-success");
         },
         error: function(err) {
          alert(err);
        }
        });
     }    
}

Answer 2

 function insertData() {
              var rez_ad=$("#rez_ad").val();
              var rez_saat=$("#rez_saat").val();
              var rez_gsm=$("#rez_gsm").val();
              var rez_tarih=$("#rez_tarih").val();
              var rez_email=$("#rez_email").val();
              var rez_tip=$("select#rez_tip").val();
              var rez_sayi=$("select#rez_sayi").val();
              var rez_aciklama=$("#rez_aciklama").val();
       if(rez_ad == "" || rez_saat == "" || rez_gsm == "" || rez_tarih == "" || rez_email == "" || rez_tip == "" || rez_sayi == "" || rez_aciklama == "" ){
       $("#message").html("some field is empty!!");
       
       }else{

            // AJAX code to send data to php file.
            $.ajax({
              type: "POST",
              url: "rez/insert-data.php",
              data: {rez_ad:rez_ad,rez_saat:rez_saat,rez_gsm:rez_gsm,rez_email:rez_email,rez_tarih:rez_tarih,rez_tip:rez_tip,rez_sayi:rez_sayi,rez_aciklama:rez_aciklama},
              dataType: "JSON",
              success: function(data) {
               $("#message").html(data);
               $("#message").addClass("alert alert-success");
             },
             error: function(err) {
              alert(err);
            }
            });
         }    
    }

<form name="rezform" onsubmit="return validation()" id="loginForm" method="POST" action="#" >

Answer 3

Поскольку вы используете jquery, используйте метод $ ('form'). Submit (), чтобы вернуть false, если проверка не удалась. в противном случае верните истину.

$( "form" ).submit(function( event ) {
    if ( $( "input:first" ).val() === "correct" ) {
        $( "span" ).text( "Validated..." ).show();
        return;
    }

    $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
    event.preventDefault();
});

Я создал страницу jsbin для ссылки, предоставленной jquery: https://jsbin.com/dokabod/1/edit?html,output

Answer 4

Вы можете сделать что-то вроде создания функции проверки для проверки, являются ли поля ввода пустыми или нет.

function validation() {

  submit = true;
  var rez_ad = $("#rez_ad").val();

  if ( rez_ad.trim() == "" ) {

    //Do what ever you like with when empty submission.
    alert('Input is empty.');

    submit = false;
  }

  return submit;
}

Затем в форме при отправке вернуть эту функцию.

<form action="" onsubmit="return validation()" method="POST">