使用jquery附加PHP echo

时间：2015-03-24 15:32:17

标签： javascript php jquery html

我有PHP来验证表单，它是回声和错误消息

 <?php

if(!$_POST) exit;
error_reporting(0);

// Email address verification, do not edit.
function isEmail($email) { 
    return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));     
}

if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

$name     = $_POST['name'];
$email    = $_POST['email'];
$phone   = $_POST['phone'];
$comments = $_POST['comments'];
$verify   = $_POST['verify'];
$nameerror = 'please enter your name';
if(trim($name) == '') {
    echo '<div class="error_name">Attention! You must enter your name.</div>';
    exit();
} else if(trim($email) == '') {
    echo '<div class="error_message"><br /><br /><center>Attention! Please enter a valid email address.</center></div>';
    exit();
} else if(trim($phone) == '') {
    echo '<div class="error_message"><br /><br /><center>Attention! Please enter a valid phone number.</center></div>';
    exit();
} else if(!is_numeric($phone)) {
    echo '<div class="error_message"><br /><br /><center>Attention! Phone number can only contain digits.</center></div>';
    exit();
} else if(!isEmail($email)) {
    echo '<div class="error_message"><br /><br /><center>Attention! You have enter an invalid e-mail address, try again.</center></div>';
    exit();
}


 else if(trim($comments) == '') {
    echo '<div class="error_message"><br /><br /><center>Attention! Please enter your message.</center></div>';
    exit();
}  


if(get_magic_quotes_gpc()) {
    $comments = stripslashes($comments);
}


// Configuration option.
// Enter the email address that you want to emails to be sent to.
// Example $address = "joe.doe@yourdomain.com";

$address = "cedrichugh@yahoo.com";


// Configuration option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."

// Example, $e_subject = '$name . ' has contacted you via Your Website.';

$e_subject = 'You\'ve been contacted by ' . $name . '.';


// Configuration option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

$e_body = "You have been contacted by $name , their additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$comments\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $name via email, $email or via phone $phone";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: Website_Contact_Form" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

if(mail($address, $e_subject, $msg, $headers)) {

    // Email has sent successfully, echo a success page.

    echo "<fieldset>";          
    echo "<div id='success_page'>";
    echo "<center><h1>Email Sent Successfully.</h1></center>";
    echo "<center><p>Thank You <strong>$name</strong>, Your Message Has Been Sent. We Will Be In Contact With You Shortly.<br />Med Perfect</p></center>"; 
    echo "</div>";
    echo "</fieldset>";

} else {

    echo 'ERROR!';

}
?>

但是DIV.error_name显示在页面底部。

如何将其附加到输入字段，以便可以在其上方或下方显示

<form role="form" id="feedbackForm" method="post" action="index.php?page=contact">
          <div class="form-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            <span class="help-block" style="display:none;">Please enter your name.</span>
            </div>
          
          <div class="form-group">
            <input type="phone" class="form-control" id="phone" name="phone" placeholder="Contact Number">
            <span class="help-block" style="display: none;">Please enter a valid contact number address.</span>
            </div>
          
          <div class="form-group">
            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
            <span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
            </div>
            
          <div class="form-group">
          <select name="select" class="form-control" id="select">
          	<option value="">Please Select Your Interest</option>
          	<option value="general_enquiry">General Enquiry</option>
  			<option value="saab">Saab</option>
  			<option value="mercedes">Mercedes</option>
  			<option value="other">Other</option>
          </select>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
          </div>  
          
          <div class="form-group">
            <textarea rows="10" cols="100" class="form-control" id="comments" name="comments" placeholder="Message"></textarea>
            <span class="help-block" style="display: none;">Please enter a message.</span>
            </div>
          
          
          
          <button type="submit" name="submit" id="feedbackSubmit" class="btn44 btn-4 btn-4c icon-mail-send" style="display: block; margin-top: 10px;">Send</button>
          </form>

我从api.jquery.com（我是菜鸟）尝试了以下内容

$( "#name" ).append( ".error_name" );

2 个答案:

答案 0 :(得分：0)

创建一个JavaScript函数，用于处理带有错误消息的DOM更新，并且可以从页面上的任何位置调用该函数。您可以在任何地方触发错误消息，包括HTML文件，JavaScript文件或PHP端。

示例JS函数：

function displayError(fieldID, errorClass, errorMessage) {
    if ($('#' + fieldID).next('.' + errorClass).length == 0) {
        $('#' + fieldID).after('<div class="' + errorClass + '">' + errorMessage + '</div>');
    }
}

调用JavaScript函数（DOM必须准备好）：

displayError('name', 'error_name', 'You must enter your name.');

在服务器端验证中控制从PHP调用函数：

if(trim($name) == '') {
    // Call error message function after when DOM is ready
    echo '<script>$(function () { displayError(\'name\', \'error_name\', \'You must enter your name.\'); });</script>';
    exit();
}

在JavaScript端验证时，您也可以使用相同的功能：

$(function () {
    $('#btnSubmit').on('click', function () {
        event.preventDefault;
        // Validate
        if ($('#name').val() == '') {
            // Name field is empty
            displayError('name', 'error_name', 'You must enter your name.');
        }
    });
});

演示：https://jsfiddle.net/BenjaminRay/6cLvnk3L/

答案 1 :(得分：-1)

如何将div添加到您的网站？ 按优先顺序列出的想法。

  • 您可以将空格（<div class"error_name"></div>）留在您希望显示消息的位置，并将返回的文本添加到其中（不包含周围的标记）。

  • 添加$（“。error_name”）的结果，而不是附加字符串“.error_name”。如果div已经添加到DOM，那么$( "#name" ).after( $(".error_name") );。 .append()将其添加为输入子项。

  • 您还可以使用jquery和css对div进行样式设置和定位，而不必担心它在DOM中的位置。

相关问题
最新问题