表单完成上的验证输入字段

时间:2017-11-24 11:27:03

标签: javascript php jquery html ajax

我使用PHP创建了一个Contact表单,但是我通过Ajax脚本发送了提交按钮,因此我的表单在字段全部完成并且用户推送发送后不会关闭。

但现在我的问题是,即使字段为空,PHP也不会发送错误消息,以便用户可以看到它们。我的问题是如何使用echo json_encode使PHP发送错误消息,以防字段为空或者它们不是应该写的?

信息通过Ajax脚本发送,验证在PHP内部。



$(document).ready(function(){
	$("#myModal").modal('hide');
  $('#contact-submit').on('click', function(){

    $.ajax({
    	url:"forms.php",
      type:'post',
      data:$('#contact').serializeArray(),
      success:function(data){
      $("#myElem").show();
setTimeout(function() {$ ("#myElem").hide();}, 5000);
      }
    })
  })
})

<?php

// define variables and set to empty values
$numeprodus_error = $marime_error = $nume_error = $prenume_error = $adresa_error = $oras_error = $codpostal_error = $email_error = $telefon_error = "";
$numeprodus = $marime = $nume = $prenume = $adresa = $oras = $codpostal = $email = $telefon = $message = $success = "";

//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["numeprodus"])) {
    $numeprodus_error = "Numele este Obligatoriu!";
  } else {
    $nume = test_input($_POST["numeprodus"]);
    // check if nume only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$numeprodus)) {
      $numeprodus_error = "Doar litere sunt permise in acest camp!";
    }
  }


    if (empty($_POST["marime"])) {
      $marime_error = "Selectati marimea!";
    } else {
      $nume = test_input($_POST["marime"]);
      // check if nume only contains letters and whitespace
      if (!preg_match("/^[a-zA-Z ]*$/",$marime)) {
        $marime_error = "Doar litere sunt permise in acest camp!";
      }
    }


      if (empty($_POST["nume"])) {
        $nume_error = "Numele este Obligatoriu!";
      } else {
        $nume = test_input($_POST["nume"]);
        // check if nume only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z ]*$/",$nume)) {
          $nume_error = "Doar litere sunt permise in acest camp!";
        }
      }


      if (empty($_POST["adresa"])) {
        $adresa_error = "Adresa este obligatorie!";
      } else {
        $adresa = test_input($_POST["adresa"]);
        // check if e-mail address is well-formed
        if (!preg_match("/[a-zA-Z0-9.]/i",$adresa)) {
          $adresa_error = "";
        }
      }


        if (empty($_POST["oras"])) {
          $oras_error = "Orasul este obligatoriu!";
        } else {
          $oras = test_input($_POST["oras"]);
          // check if nume only contains letters and whitespace
          if (!preg_match("/^[a-zA-Z ]*$/",$oras)) {
            $oras_error = "Doar litere sunt permise in acest camp!";
          }
        }

      if (empty($_POST["codpostal"])) {
        $codpostal_error = "Codul postal este Obligatoriu!";
      } else {
        $codpostal = test_input($_POST["codpostal"]);
        // check if e-mail address is well-formed
        if (!preg_match("/[0-9.]/i",$codpostal)) {
          $codpostal_error = "Doar cifre sunt permise in acest camp!";
        }
      }

      if (empty($_POST["email"])) {
        $email_error = "Emailul este Obligatoriu!";
      } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $email_error = "Email Invalid! Exemplu: ----@gmail.com";
        }
      }

      if (empty($_POST["telefon"])) {
        $telefon_error = "Numarul de Telefon este Obligatoriu!";
      } else {
        $telefon = test_input($_POST["telefon"]);
        // check if e-mail address is well-formed
        if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$telefon)) {
          $telefon_error = "Numar de telefon Invalid! Minimum 10 Cifre!";
        }
      }

      if (empty($_POST["message"])) {
        $message = "";
      } else {
        $message = test_input($_POST["message"]);
      }

      if ($numeprodus_error == '' and $marime_error == '' and $nume_error == '' and $prenume_error == '' and $adresa_error == '' and $oras_error == '' and $codpostal_error == '' and $email_error == '' and $telefon_error == '' ){
          $message_body = '';
          unset($_POST['submit']);
          foreach ($_POST as $key => $value){
              $message_body .=  "$key: $value\n";
          }

          $to = 'andreiccl24@gmail.com';
          $subject = 'Contact Form Submit';
          if (mail($to, $subject, $message_body)){
              $success = "Comanda a fost Trimisa, va vom contacta in maximum 24 ore pentru confirmarea ei!";
              $numeprodus = $marime = $nume = $prenume = $adresa = $oras = $codpostal = $email = $telefon = $message = $success = '';
      }
  }

}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
&#13;
<div class="container">
  <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Comanda prin Email</h3>
          <h6 style="text-align: center;">Dupa plasarea comenzi in maximum 24 ore ve-ti fi contactat Telefonic pentru confirmarea acesteia!!!</h6>
        </div>
        <div class="modal-body">
          <?php include('forms.php'); ?>
            <div class="container">
              <form id="contact" method="post">
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <select class="form-input-field" placeholder="Nume Produs" type="text" name="numeprodus" value="<?= $numeprodus ?>" tabindex="1" autofocus>
                  <option value="" disabled selected>Produse</option>
                  <option>A</option>
                  <option>B</option>
                  <option>C</option>
                  <option>D</option>
                  <option>E</option>
                  <option>F</option>
                  </select>
                  <span class="error"><?= $numeprodus_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <select class="form-input-field" placeholder="Marimea" type="text" name="marime" value="<?= $marime_produs ?>" tabindex="2" autofocus>
                  <option value="" disabled selected>Marimi</option>
                  <option>S</option>
                  <option>M</option>
                  <option>L</option>
                  <option>XL</option>
                  <option>XXL</option>
                  </select>
                  <span class="error"><?= $marime_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Nume/Prenume" type="text" name="nume" value="<?= $nume ?>" tabindex="3" autofocus>
                  <span class="error"><?= $nume_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Adresa" type="text" name="adresa" value="<?= $adresa ?>" tabindex="4" autofocus>
                  <span class="error"><?= $adresa_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Oras" type="text" name="oras" value="<?= $oras ?>" tabindex="5" autofocus>
                  <span class="error"><?= $oras_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Cod Postal" type="number" name="codpostal" value="<?= $codpostal ?>" tabindex="6" autofocus>
                  <span class="error"><?= $codpostal_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Email" type="text" name="email" value="<?= $email ?>" tabindex="7">
                  <span class="error"><?= $email_error ?></span>
                </fieldset>
                <fieldset>
                  <sup class="form_sup">*</sup>
                  <input class="form-input-field" placeholder="Telefon" type="number" name="telefon" value="<?= $telefon ?>" tabindex="8">
                  <span class="error"><?= $telefon_error ?></span>
                </fieldset>
                <span class="form_span">Mesaj:</span>
                <fieldset>
                  <textarea cols="50" row="10" value="<?= $message ?>" name="message" tabindex="9">
                  </textarea>
                </fieldset>
                <fieldset>

                </fieldset>
<div id="myElem" style="display:none">BV MA AI FACUTO</div>
              </form>
            </div>
        </div>
        <div class="dv-atentionare"><h3 class="dv-att-h3">Atentie!</h3><h6 class="dv-att-p2">Aveti la dispozitie 48 ore de la plasarea comenzi pentru a o putea anula!</h6></div>
        <div class="modal-footer">
         <input class="btn btn-default" name="submit" type="button" id="contact-submit" data-submit="...Sending" value="Trimite"></input>
         <button type="button" class="btn btn-default" data-dismiss="modal">Inchide</button>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

我在CSS中添加了我的PHP脚本,因为没有别的地方可以做到。

提前谢谢你们。基于我的工作,我将支持任何建议和批评:)

请记住,我正处于学习这个阶段。因此,提示始终是我期待的东西,所以我可以阅读它。

2 个答案:

答案 0 :(得分:0)

尝试这样的事情:

导致错误时:

<?php
$errors = [];
//..
if (empty($_POST["marime"])) {
    $errors[] = "Selectati marimea!";
} else {
    $nume = test_input($_POST["marime"]);
    // check if nume only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/", $marime)) {
        $errors[] = "Doar litere sunt permise in acest camp!";
    }
}

//...
echo json_encode($errors);

答案 1 :(得分:0)

嘿,我的罗马尼亚同胞 首先,您需要更改您的php以返回错误的json,如果有任何或成功消息:

<?php

$numeprodus = $marime = $nume = $prenume = $adresa = $oras = $codpostal = $email = $telefon = $message = $success = "";
$errors = [];
//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["numeprodus"])) {
    $errors[] = "Numele este Obligatoriu!";
  } else {
    $nume = test_input($_POST["numeprodus"]);
    // check if nume only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$numeprodus)) {
      $errors[]= "Doar litere sunt permise in acest camp!";
    }
  }


    if (empty($_POST["marime"])) {
      $errors[]= "Selectati marimea!";
    } else {
      $nume = test_input($_POST["marime"]);
      // check if nume only contains letters and whitespace
      if (!preg_match("/^[a-zA-Z ]*$/",$marime)) {
        $errors[]= "Doar litere sunt permise in acest camp!";
      }
    }


      if (empty($_POST["nume"])) {
        $nume_error = "Numele este Obligatoriu!";
      } else {
        $nume = test_input($_POST["nume"]);
        // check if nume only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z ]*$/",$nume)) {
          $errors[]= "Doar litere sunt permise in acest camp!";
        }
      }


      if (empty($_POST["adresa"])) {
        $errors[]= "Adresa este obligatorie!";
      } else {
        $adresa = test_input($_POST["adresa"]);
        // check if e-mail address is well-formed
        if (!preg_match("/[a-zA-Z0-9.]/i",$adresa)) {
          $adresa_error = "";
        }
      }


        if (empty($_POST["oras"])) {
          $errors[]= "Orasul este obligatoriu!";
        } else {
          $oras = test_input($_POST["oras"]);
          // check if nume only contains letters and whitespace
          if (!preg_match("/^[a-zA-Z ]*$/",$oras)) {
            $errors[]= "Doar litere sunt permise in acest camp!";
          }
        }

      if (empty($_POST["codpostal"])) {
        $errors[]= "Codul postal este Obligatoriu!";
      } else {
        $codpostal = test_input($_POST["codpostal"]);
        // check if e-mail address is well-formed
        if (!preg_match("/[0-9.]/i",$codpostal)) {
          $errors[]= "Doar cifre sunt permise in acest camp!";
        }
      }

      if (empty($_POST["email"])) {
        $errors[]= "Emailul este Obligatoriu!";
      } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $errors[]= "Email Invalid! Exemplu: ----@gmail.com";
        }
      }

      if (empty($_POST["telefon"])) {
        $errors[]= "Numarul de Telefon este Obligatoriu!";
      } else {
        $telefon = test_input($_POST["telefon"]);
        // check if e-mail address is well-formed
        if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$telefon)) {
          $errors[]= "Numar de telefon Invalid! Minimum 10 Cifre!";
        }
      }

      if (empty($_POST["message"])) {
        $message = "";
      } else {
        $message = test_input($_POST["message"]);
      }

      if (count($errors)) {
          $message_body = '';
          unset($_POST['submit']);
          foreach ($_POST as $key => $value){
              $message_body .=  "$key: $value\n";
          }

          $to = 'andreiccl24@gmail.com';
          $subject = 'Contact Form Submit';
          if (mail($to, $subject, $message_body)){
              $success = "Comanda a fost Trimisa, va vom contacta in maximum 24 ore pentru confirmarea ei!";
              echo json_encode(['message'=>$success]);
      } else {
             echo json_encode(['message'=>$errors,'errors'=>true]);
      }
  }

}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

接下来在你的js中你需要输出你的ajax请求的结果,我在这里使用了一个警告框,你可以使用一个模态或其他东西

$('#contact-submit').on('click', function(e){
e.preventDefault();
    $.ajax({
            url:"forms.php",
          type:'post',
          data:$('#contact').serialize(),
          success:function(data){
          $("#myElem").show();
    setTimeout(function() {$ ("#myElem").hide();}, 5000);

          if(data.errors) {
            alert('Avem erori'+data.message)
          } else {
            alert('Mesaj de la ajax:'+data.message)
           }
         }
        })

 })

请勿忘记阻止默认点击事件

相关问题