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也将进入mysql。因此，我必须像在html输入或选择框中那样做它。我不知道如何在javascript中正确执行此操作。我找到了另一个脚本，但无法像这个脚本一样工作。因此，我该如何在此字段中放置必填字段，如果您能解释它的逻辑，那就太好了！

我们还有一个在JavaScript表单上保护机器人的技巧吗？

谢谢！祝你有美好的一天。

Answer 1

您可以执行类似创建验证功能的操作，以检查输入字段是否为空。

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">

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。否则返回true。

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

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

我已经为jQuery提供的参考创建了一个jsbin页面：https://jsbin.com/dokabod/1/edit?html,output

Answer 4

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

Ajax表单必需的选择和输入字段

4 个答案: