0

我正在尝试对主 html 页面中的 php 表单验证中的某个给定错误进行动画处理。我的问题是我不知道如何传递错误以触发 jquery 脚本在浏览器页面的表单顶部滑动消息。

html-contact.php

<form method="post" name="contact_form" action="message_handler.php">
<input type="text" class="textbox" name="name" maxlength="12" />
<input type="text" class="textbox" name="last_name" maxlength="12" />
<input type="text" class="textbox" name="email" maxlength="40" />
<input type="text" class="textbox_2" name="title" maxlength="40" />
<textarea name="message" ></textarea>
<input type="submit" value="Send Form">
</form>

php - message_handler.php

  $name = $last_name = $visitor_email = $title = $message = $about = $validation = '';
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $visitor_email = $_POST['email'];
  $title = $_POST['title'];
  $message = $_POST['message'];
  $about = $_POST['about'];
  $validation = $_POST['validation'];
  $errors = array();

  if( empty($name) || empty($visitor_email) || empty($message) || empty($validation))
  { 
        echo 'Required fields.';
  }

jquery - general_script.js

$('.error_message').animate({'width':300}, {queue:false, duration:200});
4

1 回答 1

0

首先，没有必要使用 php 验证表单。您也可以通过 jquery 来完成。在表单提交上使用 jquery，并在那里进行所有验证。

（给提交按钮类 .submit。还将 .error_message div 定位到您希望使用 css 显示错误的位置，并将其隐藏。）

HTML

<div class='error_message' style='display:none'></div>

jQuery

$(document).ready(function() {
     $('form').on('click', '.submit', function() {
          var name = $("input[name='name']").val();
          var lname = $("input[name='lastname']").val();
          var email = $("input[name='email']").val();
          var title = $("input[name='title']").val();

          if(name.length == 0 || lname.length == 0 || email.length == 0 || title.length == 0) {
               $('.error_message').html("All fields required.");
               $('.error_message').fadeIn();
          }

          // .. more validation can be done here ..

          return false;
     });
})
于 2013-01-30T15:03:48.807 回答