Question

我是Ajax和jquery的新手。我正在使用它们来设计一个Ajax表单.Below是我从谷歌获得的代码。

我有两个文件＆＃34; form.php＆＃34;和＆＃34; process.php＆＃34;即。这是它遍历form.php的方式：这个表单用于获取值，如果用户无法输入数据，则必须显示它来自＆＃34; process.php＆＃34;说＆＃34;这个字段是空的＆＃34;。

最初，我从谷歌下载的原始版本只有一个输入字段是＆＃34;名称＆＃34;。我通过添加另一个名为＆＃34;密码＆＃34;的字段来自定义表单。每当我点击＆＃34;提交＆＃34;显示空值的按钮＆＃34;名称不能为空白＆＃34;对于这两个领域。相反，它必须是＆＃34;名称不能为空白＆＃34;和＆＃34;密码不能为空白＆＃34;

以下是 form.php 的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Ajax Form</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('form').submit(function(event) { //Trigger on form submit
                //$('#name + .throw_error').empty(); //Clear the messages first
                //$('#success').empty();

                var postForm = { //Fetch form data
                    'name'    : $('input[name=name]').val()
                    'password': $('input[name=password]').val()
                };

                //Store name fields value
                $.ajax({ //Process the form using $.ajax()
                    type        : 'POST', //Method type
                    url         : 'process.php', //Your form processing file url
                    data        : postForm, //Forms name
                    dataType    : 'json',
                    success     : function(data) {
                        if (!data.success) { //If fails
                          if (data.errors.name) { //Returned if any error from process.php
                            $('.throw_error').fadeIn(1000).html(data.errors.name);
                          }
                          else if(data.errors.password)
                          {
                            $('.throw_error').fadeIn(1000).html(data.errors.password);
                          }
                        } 
                        else {
                            $('#success').fadeIn(1000).append(
                              '<p>' + data.posted + '</p>'
                            ); 
                        }
                      }
                });
                event.preventDefault(); //Prevent the default submit
            });
          });
         </script>
         <style>
          ul {
            font-family: Arial;
            list-style-type: none;
            }

           #success {
            display: none;
            font-family: Arial;
            color: green;
            margin-left: 85px;
            font-size: 14px;
            }

           input[type=text] {
            padding: 5px;
            box-shadow: inset 0 0 5px #eee;
            border: 1px solid #eee;
            }

           input[type=submit] {
            padding: 3px 8px;
            background: #eee;
            margin-left: 85px;
            cursor: pointer;
            border: 1px solid #aaa;
            font-size: 12px;
            }

          .throw_error {
            color:tomato;
            font-size: 12px;
            display: none;
             }

          label {
            font-size: 13px;
            }
      </style>
     </head>
      <body>
       <form method="post" name="postForm">
        <ul>
            <li>
                <label for="name">Name</label>
                <input type="text" name="name" id="name" />
                <span class="throw_error"></span>
            </li>
            <li>
                <label for="password">Password</label>
                <input type="password" name="password" id="password" />
                <span class="throw_error"></span>
            </li>
        </ul>
        <input type="submit" value="Send" />
       </form>
    <div id="success"></div>
   </body>
  </html>

这是 process.php

<?php
$errors = array();    //To store errors
$form_data = array(); //Pass back the data to `form.php`


/* Validate the form on server side */

if(empty($_POST['name'])) { //Name cannot be empty
    $errors['name'] = 'Name cannot be blank';
}

if(empty($_POST['password'])){
    $errors['password'] = 'password cannot be blank';
}

if (!empty($errors)) { //If errors in validation
    $form_data['success'] = false;
    $form_data['errors']  = $errors;
} 
else { //If not, process the form, and return true on success
    $form_data['success'] = true;
    $form_data['posted'] = 'Data Was Posted Successfully';
}

//Return the data back to form.php
echo json_encode($form_data);

Answer 1

您的主要问题是您正在使用＆＃34;否则如果＆＃34;输入密码错误。如果前一个＆＃34; if＆＃34;确实。而只是使用两个ifs：

if(data.errors.name) {
...
}

if(data.errors.password) {
...
}

但这可能不会完全符合您的要求，因为您将直接替换＆＃34; .throw_error＆＃34;的内容。每一次，只有最新的错误将在＆＃34; .throw_error＆＃34;元件。相反，您希望确保只填充相关的错误容器。例如，给出以下标记：

<input name="name"/>
<div class="throw_error"></div>

<input name="password"/>
<div class="throw_error_password"></div>

你在JS：

//for name errors
$(".throw_error").html(data.errors.name);

// for password errors
$(".throw_error_password").html(data.errors.password);

当字段留空时，错误消息无法正确显示？

1 个答案: