显示消息/错误-表单验证 - Showing messages / errors - form validation

因为我是新的web开发，我想在正确的方向前进，我有一个关于表单验证的问题。所以，我有一个小的形式，它应该添加一些信息到数据库。显然，为此我需要使用PHP。提交表单后，我需要留在同一页面上，但我需要在表单下向用户发送消息/错误(如果用户将输入字段留空或数据库事务已成功完成或根本未完成)。

这是我的表单:

<form method="post" action="index.php" name="addOperationForm">
    <input type="text" class="input" placeholder="Name of operation" name="nameOfSearch"/>
    <input type="text" class="input" placeholder="Security code" name="securityCode"/>
    <input type="submit" class="btns" value="Add to dB" name="submitAddSearch"/>
</form>

到目前为止，我使用单独的PHP文件- index.php与数据库建立连接并向数据库添加数据。

管理发送消息给用户，我应该使用PHP和HTML代码在一个(然后以某种方式回消息下的形式)或我应该使用jQuery(但我怎么能然后建立数据库连接)?最后，正确的做法是什么?你能举个例子吗?

你所能做的就是编写一个php脚本来处理验证并以json格式返回响应，这样jQuery就可以使用ajax来处理请求。

<?php
  //Get submitted data from the form
  $name = $_POST["name"];
  //sample validation character is less than 2 char
  if(strlen($name) < 2){
    $response = array(
                "error" => true,
                "message" => "Name should be 2 characters or more"
           );
  }else{
      $response = array(
           "error" => false,
           "message" => "Name is valid"
      );
  }
//Return the response for ajax request
     echo json_encode($response);

现在在你的客户端(表单视图)使用jQuery发出ajax请求

$(document).ready(function(){
     $.ajax({
         url : "response.php", //the php script that will handle the validation
         method : "post"
     }).done(function(response){
        //handle the response
         if(response.error===false){
             //output the response message below the form
             //success has div with class success
             $("<div class='success'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");
             //redirect to a page
             //  window.location.href = "nextpage.php";
         }else{
            //error has class='error'
             $("<div class='error'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");
         }
     });
});

要在成功和错误类中添加样式，请在css文件

中添加以下内容

.success { background-color : #0f0; color : #fff; } /* background is green for success */
.error {background-color : #f00; color : #fff;} /* background is red for error */

代码没有经过测试，但应该可以在您的用例中工作。

您可以使用jQuery进行表单验证(空检查)

<form method="post" action="index.php" name="addOperationForm">
    <input type="text" class="input" placeholder="Name of operation" name="nameOfSearch"/>
    <input type="text" class="input" placeholder="Security code" name="securityCode"/>
    <input type="button" id="submit_btn" class="btns" value="Add to dB" name="submitAddSearch"/>
</form>

jQuery

jQuery(document).ready(function(){
    //capture button click event
    jQuery('#submit_btn').click(function(){
        var err = 0;
        jQuery('.input').each(function(){
            //if input is empty, increment err variable
            if(jQuery.trim(jQuery(this).val()).length == 0) err++;  
        });
        if(err == 0) jQuery('#form').submit(); //submit form when err is 0
        else alert("Please fill out the form completely");
    });
});