服务器端验证内联显示成功或错误消息

时间：2017-10-27 20:26:49

标签： javascript php jquery html ajax

我为我的班级建立了一个表格（仅限私人访问），每个人都提交一份包含一些信息的表格。诸如课程的全名，主题，教师列表的选择选项以及可用教室的复选框等信息。有些人可能喜欢大房间或小房间以及可供学习的配件。我努力设计并在bootstrap和php中构建了一个表单。表单看起来很好，验证是内联的，直到我需要在其中包含一个以上的功能。每当我提交表格时，它都会被加载。我的意思是，表单适用于php和html验证，但每次点击提交时整个页面都会被加载。我谷歌并知道这个目标应该由Ajax实现。我看了youtube视频，并在这里关注其他问题，但一无所获。内联验证或在同一页面上显示成功消息仍然无法正常工作。我想要的是当用户提交表单时，它将在同一页面上显示警报成功消息而不刷新或内联错误消息，如果服务器端验证有任何错误。代码可以在互联网上轻松获取。

HTML：

<?php 
    include('ajaxreturn.php');
    ?>
    <!DOCTYPE html>
    <html lang="en">
      <head>

        <title>Hello, world!</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

      <body>


         <form id="submit" onsubmit="submitForm(); return false;">
              <div class="row">
         <div class="col-md-12">
              <div class="form-group">
              <label class="form-control-label" for="Name">Name</label>
              <input class="form-control" id="name" type="text" name="name" value= "<?php if (isset($_POST["name"])) echo htmlspecialchars($_POST["name"]) ?>">
              <span class="text-danger"><?php echo $name_error;?></span>
                  </div>
                  </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                  <div class="form-group">
              <label class="form-control-label" for="subject">Subject</label>
              <input class="form-control form-control" type="text" name="subject" id="subject" value= "<?php if (isset($_POST["subject"])) echo htmlspecialchars($_POST["subject"]) ?>">
              <span class="text-danger"><?php echo $subject_error;?></span>
                  </div>
                      </div>
                  </div>

                  <div class="row">
                  <div class="col-md-12">
                  <div class="form-group">
                  <label for="Category">Category</label>
                  <select class="form-control pt-0 pb-0" id="category">
                    <option>...</option>
                    ?>
                  </select>
                </div>
                </div>
          </div>
          <div class="row">
                <div class="form-check pl-3 pt-1">
                  <label class="form-check-label">
                    <input name="classroom" id="classroom" class="form-check-input" type="checkbox" <?php if (isset($classroom) && $classroom=="classroom") echo "checked";?> value="classroom">
                    L-1
                  </label>
                </div>
                <span class="text-danger pl-3 pt-0"><?php echo $classroom_error;?></span>

                </div> 
                div class="row">
                <div class="form-check pl-3 pt-1">
                  <label class="form-check-label">
                    <input name="classroom" id="classroom" class="form-check-input" type="checkbox" <?php if (isset($classroom) && $classroom=="classroom") echo "checked";?> value="classroom">
                    L-2
                  </label>
                </div>
                <span class="text-danger pl-3 pt-0"><?php echo $classrooms_error;?></span>

                </div> 
          <div class="row">
            <button id="submit" name="submit" value="submit" type="submit" class="btn btn-success">submit</button>
<span class="text-danger"> Wrong!</span>
<span class="text-success"> Thanks!</span>
          </div>
          </form>


        <!-- Optional JavaScript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <!-- <script src="main.js"></script> -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

      </body>
    </html>

PHP：

<?php

// Form Variables 
$name = "";
$subject = "";
$category = "";
$classroom="";

//Error Variables
$name_error ="";
$subject_error = "";
$category_error = "";
$classroom_error = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $name_error = "Your Name";
  } else {
    $name = validation($_POST["name"]);
    // Function calling and checking the letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $name_error = "Your name must contain Letters, Numbers and Spaces"; 
    }
  }

  if (empty($_POST["subject"])) {
    $subject_error = "Your Subject";
  } else {
    $website = validation($_POST["subject"]);
    // Function calling and checking the letters and whitespace
    if ((!preg_match("/^[a-zA-Z ]*$]/", $subject)) {
      $subject_error = "Subjets must contain Letters, Numbers and Spaces";
    }
  }

  if (empty($_POST["category"])) {
    $category_error = "Please select categoy";
  } else {
    $category = validation($_POST["category"]);
  }

  if (empty($_POST["classroom"])) {
    $classroom_error = "Select the Class Room";
  } else {
    $classroom = validation($_POST["classroom"]);
  }
}




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

?>

的Ajax：

<script>
  function _(id){ return document.getElementById(id); }
  function submitForm(){
  _("submit").disabled = true;
  _("status").innerHTML = 'please wait ...';
  var formdata = new FormData();
  formdata.append( "name", _("name").value );
  formdata.append( "subject", _("subject").value );
  formdata.append( "category", _("category").value );
  formdata.append( "classroom", _("classroom").value );
  var ajax = new XMLHttpRequest();
  ajax.open( "POST", "ajaxreturn.php" );
  ajax.onreadystatechange = function() {
    if(ajax.readyState == 4 && ajax.status == 200) {
      if(ajax.responseText == "success"){
        _("submit").innerHTML = '<h2>Thanks '+_("name").value+', your message has been sent.</h2>';
      } else {
        _("status").innerHTML = ajax.responseText;
        _("submit").disabled = false;
      }
    }
  }
  ajax.send( formdata );
}
</script>

错误：

ajaxform.php?name=&website=&submit=submit:78 Uncaught TypeError: Cannot read property 'value' of null
    at submitForm (ajaxform.php?name=&website=&submit=submit:78)
    at HTMLButtonElement.onclick (ajaxform.php?name=&website=&submit=submit:58)
submitForm @ ajaxform.php?name=&website=&submit=submit:78
onclick @ ajaxform.php?name=&website=&submit=submit:58

ajaxform.php?name=&website=&submit=submit:78 
formdata.append( "category", _("category").value );

onclick @ ajaxform.php?name=&website=&submit=submit:58
        <button name="submit" id="submit" onclick="submitForm()" value="submit" type="submit" class="btn btn-success">submit</button>

带选择选项标签的类别

   <option value=1>1</option>
<option value=1>1</option>
<option value=1>1</option><option value=1>1</option>

1 个答案:

答案 0 :(得分：0)

尝试将内部的ajax更改为此。

if (this.status == 200 && this.readyState == 4) {
   this.responseText;

上面的其他代码看起来是正确的。我从未见过使用过变量名的xmlhttprequest，通常它看起来像

var xhr1 = new XMLHttpRequest();
xhr1.open('POST', "ajaxreturn.php", true);
xhr1.onreadystatechange = function() {
    if (this.status == 200 && this.readyState == 4) {
        console.log(this.responseText);
        dostuff = this.responseText;
  };//end onreadystate
 xhr1.send();

我不知道足够的PHP来看看你的服务器端验证。我将NodeJ用于所有这些。您是否通过控制台记录了您的this.responseText以查看服务器发回的变量。也没有提交您的提交按钮，这也是您的问题，让它运行onSubmit功能。所以...... 

<button id="submit" name="submit" onclick="submitForm()" class="btn btn-success">submit</button>

并从表单标记中取出onSubmit。我相信这会解决你的问题。

当您提交表单时，这就是打开新页面的内容，当您使用ajax运行该功能时，不会使浏览器打开新页面。它只是在后台发生。

相关问题
最新问题