0

私はjqueryとphpを初めて使用し、作業中のWebサイトの連絡先フォームにjquery検証とそれに続くphpサーバー側検証を追加しようとするのに苦労しています。

Jquery validate.js がページに埋め込まれており、検証は正常に機能しますが、フォームが正しく入力され、すべてのフィールドが有効な場合に問題が発生します。送信ボタンを押しても次のページに進みません。確認メッセージと、明確にするためにフォームからのデータの一部を表示するページ。

jquery検証とphpを使用して、更新したり別のページに移動したりせずにデータを電子メールアドレスに送信するという望ましい結果をもたらすチュートリアルや質問を数多く見てきました。しかし、ロードされた新しいページでこれを機能させる簡単な方法は見つかりませんでした。

クライアント側の jquery 検証を追加する前に、フォームは正常に送信されました。nextStep.php ページで要求されたとおりに電子メールがまだ私の電子メール アドレスに送信されていますが、ページが表示されていませんが、検証によって続行が停止されているようです。JavaScript を無効にすると、送信ボタンが機能します。

私は、validate.js によってルールとエラー メッセージを簡単にカスタマイズできる点が気に入っています。可能であれば、他の JavaScript コーディング方法よりもこの方法を使用することをお勧めします。

以下は、contactForm.php と nextStep.php の両方のコードです。どんな助けでも大歓迎です。

「contactFrom.php」

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>

<meta name="google-site-verification" content="WJzOl7qm8SHqmzMTjrdQwqVgXRu-EUMnY3qYUdrcJhI" />
<meta name="keywords" content=" " />
<meta name=" " content=" " />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Custom Contact From</title>



<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">


 $(document).ready(function(){
 $('#contactForm').submit(function() {
 return $('#contactForm').valid();
 });
  $("#contactForm").validate({
         debug: false,
   rules: {
    firstName: "required",

    email: {
     required: true,
     email: true
    }
   },
   messages: {
    firstName: "Please enter your name.",
    email: "Please enter a valid email address.",
   },
   submitHandler: function(form) {
   }
  });
 });

</script>

<style type="text/css">

h1 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

label, input[type=submit] {
    font-weight: bold;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

 label.error {
    display: inline-block;
    color: #F60;
    clear: both;
    float: right;
    line-height: 16px;
    font-size: 13px;
    width: 380px;
    text-align: right;
    height: 20px;
    margin-top: 4px;
    font-weight: normal;
 }
.result {
    height: 300px;
    width: 300px;
}
#contactForm {
    margin: 20px;
    width:  360px;
    background-color: #F8F8F8;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 20px;

    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
input[type=text], textarea {
    width: 350px;
    margin-bottom: 20px;
}

</style>



</head>




<div id="wrapper">      


<form class="contactForm" action="nextStep.php" method="post" name="contactForm" id="contactForm">

      <h1>Contact Form</h1>



<label for="firstName">First Name:</label>

<br>

<input name="firstName" type="text" value="" id="firstName" class="required"/>

<br><br>

<label for="surname">Surname:</label>

<br>

<input name="surname" type="text" value="" id="surname" class="required"/>

<br><br>


<label for="email">Email:</label>

<br>

<input name="email" type="text" value="" id="email" class="required email" />

<br><br>


<label for="phone">Telephone Number:</label>

<br>

<input name="phone" type="text" value="" id="phone" class="required" />


<br><br>

<label for="comments">Comments:</label>

<br>

<textarea name="comments" class="required" cols="40" rows="10" id="requirements"></textarea>
<br><br>



<input type="submit" value="Submit" />
</p>
</form>

</div> <!-- end of wrapper Div.-->


</body>

</html>

「nextStep.php」 - これは、両方の検証セットの後にロードする必要があるページで、現在は JavaScript を無効にしてロードするだけです。私は formtoemail.com のコードを使用して、無料版のフォームから電子メールの連絡先フォームを作成しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contact Form - Complete (Next Step)</title>

<style type="text/css">

h1, p  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#formComplete {
    width: 550px;
    margin: 20px;
    border: thin solid #999;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
</head>





<?php

/* Email address for form data to be sent to */

$my_email = "contact@email.co.uk";

/* Page to return to after the form has been completed and confirmation page displayed. */

$continue = "index.php";


$errors = array();

// Server-side validation:

// Remove $_COOKIE elements from $_REQUEST.

if(count($_COOKIE)){foreach(array_keys($_COOKIE) as $value){unset($_REQUEST[$value]);}}

// Check all fields for an email header.

function recursive_array_check_header($element_value)
{

global $set;

if(!is_array($element_value)){if(preg_match("/(%0A|%0D|\n+|\r+)(content-type:|to:|cc:|bcc:)/i",$element_value)){$set = 1;}}
else
{

foreach($element_value as $value){if($set){break;} recursive_array_check_header($value);}

}

}

recursive_array_check_header($_REQUEST);

if($set){$errors[] = "You cannot send an email header.";}

unset($set);

// Validate email field.

if(isset($_REQUEST['email']) && !empty($_REQUEST['email']))
{

if(preg_match("/(%0A|%0D|\n+|\r+|:)/i",$_REQUEST['email'])){$errors[] = "Email address may not contain a new line or a colon.";}

$_REQUEST['email'] = trim($_REQUEST['email']);

if(substr_count($_REQUEST['email'],"@") != 1 || stristr($_REQUEST['email']," ")){$errors[] = "Email address is invalid";}else{$exploded_email = explode("@",$_REQUEST['email']);if(empty($exploded_email[0]) || strlen($exploded_email[0]) > 64 || empty($exploded_email[1])){$errors[] = "Email address is invalid";}else{if(substr_count($exploded_email[1],".") == 0){$errors[] = "Email address is invalid";}else{$exploded_domain = explode(".",$exploded_email[1]);if(in_array("",$exploded_domain)){$errors[] = "Email address is invalid";}else{foreach($exploded_domain as $value){if(strlen($value) > 63 || !preg_match('/^[a-z0-9-]+$/i',$value)){$errors[] = "Email address is invalid"; break;}}}}}}

}

// Check referrer is from same site.

if(!(isset($_SERVER['HTTP_REFERER']) && !empty($_SERVER['HTTP_REFERER']) && stristr($_SERVER['HTTP_REFERER'],$_SERVER['HTTP_HOST']))){$errors[] = "You must enable referrer logging to use the form.";}

// Check for a blank form.

function recursive_array_check_blank($element_value)
{

global $set;

if(!is_array($element_value)){if(!empty($element_value)){$set = 1;}}
else
{

foreach($element_value as $value){if($set){break;} recursive_array_check_blank($value);}

}

}

recursive_array_check_blank($_REQUEST);

if(!$set){$errors[] = "You cannot send a blank form. " ;}

unset($set);

// Display any errors and exit if errors exist.

if(count($errors)){foreach($errors as $value){print "$value<br>";} exit;}

if(!defined("PHP_EOL")){define("PHP_EOL", strtoupper(substr(PHP_OS,0,3) == "WIN") ? "\r\n" : "\n");}

// Build message.

function build_message($request_input){if(!isset($message_output)){$message_output ="";}if(!is_array($request_input)){$message_output = $request_input;}else{foreach($request_input as $key => $value){if(!empty($value)){if(!is_numeric($key)){$message_output .= str_replace("_"," ",ucfirst($key)).": ".build_message($value).PHP_EOL.PHP_EOL;}else{$message_output .= build_message($value).", ";}}}}return rtrim($message_output,", ");}

$message = build_message($_REQUEST);

$message = $message . PHP_EOL.PHP_EOL."-- ".PHP_EOL."";

$message = stripslashes($message);

$subject = "FormToEmail Comments";

$headers = "From: " . $_REQUEST['email'];

mail($my_email,$subject,$message,$headers);

?>



<div id="wrapper">

<div id="formComplete">





      <h1>Thank you for your comments we will get back to you very soon<?php print stripslashes($_REQUEST['FirstName']); ?>.</b></h1>

          <br>

    <p><a href="<?php print $continue; ?>">Return to home page.</a></p>



</div><!-- end #formComplete -->

</div><!-- end #Wrapper -->

</body>
</html>
4

1 に答える 1

0

空のsubmitHandlerがあります:

submitHandler: function(form) {

}

それを取り出してください。

于 2013-02-25T05:46:25.533 に答える