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を指定します。また、cssを使用してエラーを表示する場所に.error_message divを配置し、非表示にします。）

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 に答える