使用PHP变量进行jQuery表单验证

Question

我正在使用PHP变量进行表单验证，只是为了在显示文本输入的默认值时不重复HTML。文字区域。基本上，我想要实现的是，每个字段都有自己的默认值，如果用户没有输入任何内容，它会在焦点上消失并显示为模糊。

然后验证，如果用户没有使用默认值保留字段（这将使默认值为红色，以使用户关注它们）。提交后，表格向上滑动并显示div＃thanks with button，允许再次显示表单，文本区域已清除。

验证在没有PHP变量的情况下正常工作（如果关闭了JS，还有服务器端验证）。

PS。单击＃opt4后也会显示表单，但该部分也可以正常工作。

PS2。我的头在这个阶段融化了，所以如果有一些荒谬的错误就不会感到惊讶，只是为了警告你

$(document).ready(function() {

<!--
<?php

    $defaultMsg = "Please type in your message";
    $defaultEmail = "Your Email";
    $defaultName = "Your name (optional)";

?>
-->

$('#contact-form').hide();

$('a#opt4').click(function (e) {
    e.preventDefault();

    $('#contact-form').slideToggle("normal", function() {

        if ( $(".mobile-sp").css("display") === "none") {

            $('html, body').toggleState(function (el) {
                el.animate({
                scrollTop: $("#anchor").offset().top
            }, 800);
            }, function (el) {

            });

        }

    });

    $('textarea, input[type="text"]').focus(function() {

        if ( $(this).hasClass('error')) {

            $(this).removeClass('error');

        }

        var text = $(this).val();

        $(this).animate({
            color: "#fff"
        },400, function () {

            if ((text === <?php echo $defaultMsg; ?>) || (text === <?php echo defaultEmail; ?>)) {
                $(this).val("");
            }
        });
    });
    $('textarea, input[type="text"]').blur(function() {
        $(this).animate({
            color: "#6599cb"
        },400, function () {
            if ($.trim(this.value) == '') {
                $(this).val(this.defaultValue);
            }
        });
    });

});

//验证

$("#thanks").hide();
$("#submit").click(function(e) {
    e.preventDefault();
});
$("#submit").click(function(){

    $(".error").hide();
    $("#one-more").hide();

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

    var emailFromVal = $("#emailFrom").val();
    var defaultEmail = <?php echo $defaultEmail; ?>;

    if((emailFromVal == '') || (emailFromVal === defaultEmail)) {
        $("#email").val('defaultEmail');
        hasError = true;
    } else if(!emailReg.test(emailFromVal)) {
        $("#email").val('defaultEmail');
        hasError = true;
    }

    var messageVal = $("#message").val();
    var defaultMsg = <?php echo $defaultMsg; ?>;

    if((messageVal == '') || (messageVal === defaultMsg)) {
        $("textarea").val('#message'.defaultValue).addClass('error');
        hasError = true;
    }


    if(hasError == false) {
        $(this).hide();
        $("#sendEmail button").append('<img src="modules/contact/loading.gif" alt="Loading" id="loading" />');

        $.post("modules/contact/sendEmail.php",
            { emailFrom: emailFromVal, message: messageVal },
                function(data){
                    $("#sendEmail").slideUp("normal", function() {

                        $("#thanks").slideDown("normal", function() {
                            $("#one-more").slideDown("slow");
                        });

                    });
                }
             );
    }

    return false;
});

$("#one-more").click(function(e) {
    e.preventDefault();

    var defaultMsg = <?php echo $defaultMsg; ?>;

    $('#thanks').slideUp("slow",function() {
        $('form').slideDown('slow', function() {
            $('#submit').show();
            $('#message').val('defaultMsg');
        });
    });
});

}）;

// HTML

<div id="form">

            <?php include('modules/contact/verify.php'); ?>

            <h2>Talk to us about your project</h2>

            <form action="" method="post" id="sendEmail">

                <textarea name="message" id="message"><?php if(isset($_POST['message'])) { echo $_POST['message']; } else { echo $defaultMsg; } ?></textarea><?php if(isset($messageError)) echo '<span class="error">'.$messageError.'</span>'; ?>

                <input type="text" name="emailFrom" id="emailFrom"  value="<?php if(isset($_POST['emailFrom'])) { echo $_POST['emailFrom']; } else { echo $defaultEmail; } ?>"><?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?>

                <input type="text" name="name" id="name" value="<?php echo $defaultName; ?>">
                <input type="submit" id="submit" value="Send">
                <input type="hidden" name="submitted" id="submitted" value="true">

            </form>

            <div id="thanks">

                <div class="container">

                    <img src="gfx/sprites/icn-contact-success.png">
                    <h3>Thank you.</h3>
                    <p>We will get back to you as soon as possible.</p>

                </div>

                    <a href="#" class="btn" id="one-more">Oh no, wait! I want to add something!</a>

            </div>

        </div>