2

始める前に、これが長すぎる場合は謝罪を除いてください。私は Html5 (通常は Flash でデザイン) にまったく慣れておらず、始めたばかりです。最近、Brownie という無料のテンプレートをダウンロードして、連絡フォーム以外のほとんどのことを理解しました。Javascript、PHP、Ajax を使用していると思います。ローカルでは何とか機能していますが、思い通りに機能していません。私がやろうとしているのは、エラーメッセージや成功メッセージなどでフィールドを検証することです。これは私が持っているhtmlフォームコードです:

<p class="required_info"><span>*</span> Required</p>
<!-- SUCCESS MESSAGE -->
<div class="success_box none"> Email successfully sent. Thank you! </div>
<!-- END SUCCESS MESSAGE -->

<!-- START CONTACT FORM -->
<form action="#" class="contact_form">
  <p>
    <label for="name">Name <span>*</span></label>
    <input type="text" class="inputText" id="name" name="name" placeholder="Please enter your full name" pattern="[a-zA-Z ]+"  onkeypress="return alpha(event,letters)" required minlength="5" maxlength="50" onpaste="return false;" tabindex="1"/>
    <div class="success_title none"> You've entered your name. </div>
    <div class="error_title none">* Please enter your full name. </div>
    </p>
  <div class="clear"></div>
  <p>
    <label for="company">Company </label>
    <input type="text" class="inputText" id="company" name="company" placeholder="Company Name" minlength="3" maxlength="50" onpaste="return false;" tabindex="2"/>
  </p>
  <div class="clear"></div>
  <p>
    <label for="email">E-mail <span>*</span></label>
    <input type="text" class="inputText"  id="email" name="email" placeholder="Please enter a valid email address" required minlength="5" maxlength="50" onpaste="return false;" tabindex="3"/>
  <div class="error_title none">* Please enter a valid email. </div>
  </p>

  <div class="clear"></div>
  <p>
    <label for="message">Message <span>*</span></label>
    <textarea class="inputTextarea" cols="88" rows="6" id="message" name="message" placeholder="Please enter your message" required tabindex="4"></textarea>
    <div class="error_title none">* Please enter your message. </div>
  </p>
  <div class="clear padding20"></div>
  <p class="submit"><input type="reset" class="resetBtn button white" onclick="resetFields()" value="Reset" /> <a href="javascript:void(0);" class="button white" onclick="$('.contact_form').submit();">Send</a> </p>
</form>
<!-- END CONTACT FORM --> 

<!-- ERROR MESSAGE -->
<div class="error_box none"> Please complete all required fields [ highlighted in red ]. </div>
<!-- END ERROR MESSAGE -->

これはJavaScriptコードです：

$(document).ready(function () {

    $('#name').focus(function () {
        $(this).removeClass('error_class');
    });

    $('#email').focus(function () {
        $(this).removeClass('error_class');
    });

    $('#message').focus(function () {
        $(this).removeClass('error_class');
    });

    $('.contact_form').submit(function () {

        hasError = false;

        if ($('#name').val() == '') {
            $('#name').addClass('error_class');
            hasError = true;
        }

        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailaddressVal = $('#email').val();
        if (emailaddressVal == '') {
            $('#email').addClass('error_class');
            hasError = true;
        }
        else if (!emailReg.test(emailaddressVal)) {
            $('#email').addClass('error_class');
            hasError = true;
        }

        if ($('#email').val() == '') {
            $('#email').addClass('error_class');
            hasError = true;
        }

        if ($('#message').val() == '') {
            $('#message').addClass('error_class');
            hasError = true;
        }

        if (hasError == true) {
            $('.info_box').hide();
            $('.error_box').show();
            $('.error_title').show();
        }
        else {
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                cache: false,
                data: $(".contact_form").serialize(),
                success: function (data) {
                    if (data == "error") {
                        $('.success_box').hide();
                        $('.success_title').hide();
                        $('.error_box').show();
                        $('.error_title').show();
                    }
                    else {
                        $('.error_box').hide();
                        $('.error_title').hide();
                        $('.success_box').show();
                        $('.success_title').hide();
                        $('.resetBtn').hide();
                        $('.submit').hide();
                    }
                }
            });
        }

        return false;
    });
});

これはPHPコードです：

<?php

$your_email = 'name@domain.com'; // Your email address
$subject = 'Email from your contact form'; // Email subject

$name = isset($_POST['name']) && $_POST['name'] ? $_POST['name'] : ''; // Visitor Name
$company = isset($_POST['company']) && $_POST['company'] ? $_POST['company'] : ''; // Visitor Company
$email = isset($_POST['email']) && $_POST['email'] ? $_POST['email'] : ''; // Visitor Email
$message = isset($_POST['message']) && $_POST['message'] ? $_POST['message'] : ''; // Visitor Message
$website = isset($_POST['website']) && $_POST['website'] ? $_POST['website'] : ''; // Visitor Message

$full_message = 'Website: '.$website. "\r\n\r\n Message:".$message;

if($name && $email && $message)
{
    $headers = 'From: '.$name.' <'.$email.'>' . "\r\n" .
    'Reply-To: '.$email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $headers .= 'Content-type: text/plain; charset=UTF-8' . "\r\n";

    //------------------------------------------------
    // Send out email to site admin
    //------------------------------------------------
    if(@mail($your_email, $subject, $full_message, $headers))
        die("success");
    else
        die("error");
}
else
{
    die("error");
}

?>

送信ボタンが押されたときに、各入力フィールドにデータが入力されているかどうかを確認したい - はいの場合は成功メッセージを追加し、エラーメッセージを追加しない場合。エラーメッセージは表示されますが、個々の入力フィールドで成功メッセージが表示されません。どんな提案も役に立ちます...

4

1 に答える 1

0

PHPスクリプトの変数の値ではなく、各変数にtrueまたはfalseを割り当てているためだと思われます。Isset($_POST[test]) は true であり、テスト フォームの値ではありません。

于 2013-01-05T21:24:30.563 に答える