Ajax表单需要select和input字段

Question

im new at this so i couldnt work this out with required fields on script.

html form

 <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);
}



 ?>

So my problem is when i click my send button on html/php data is going mysql even if the inputs and select boxes are empty/not selected. So I have to do it required like in html input or select box. I dont know how to do it properly in javascript. I have found another script but couldnt work it same as like this one. So how can i put required field on this one and if you can explain it the logic it would be nice !

Also do we have a trick for bot protection on javascript form ?

Thanks ! And have a nice day.

Answer 1

You can do something like create a validation function for check whether input fields are empty or not.

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;
}

Then in form on submit return this function.

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