【发布时间】：2022-02-09 18:11:20
【问题描述】：
更新：我正在使用 NicePage 创建网站，其中的某些内容破坏了 scriptgenerator.net 代码。我在浏览器中收到此错误。
Uncaught TypeError: $(...).validate is not a function
我的大部分编码经验都是在 COBOL 方面的，我对 php 和 css 不太熟悉。
我需要在网站上创建一个客户表单。为了做到这一点，我使用了https://www.scriptgenerator.net上的 HTML-PHP-jQuery 简单联系表单 v2
以下是我遇到的问题：
-
我可以将 form.php 嵌入到我的网页中，但我无法 使字段标签保持垂直对齐，如 发电机的照片。
-
此外，验证似乎除了重新加载 页面，没有错误消息或任何东西。
我没有被困在使用 scriptgenerator.net，但非常感谢任何和所有帮助。我还将在页面中添加一个验证码，但希望首先让联系表单正常工作。
按照说明，我下载了生成器代码和所需的js。
这是从生成器复制的 form.php。
<title>Contact Form</title>
<style type="text/css">
#contact_wrapper {
width:100%; /* you can change the form width by just changing this line */
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
margin-bottom:20px;
}
#contact_wrapper legend {
display: inherit;
border:none;
width:auto;
font-size:120%;
font-weight:bold;
}
#contact_wrapper .genField {
display: block;
width: 100%;
height: 34px;
padding: 6px 20px;
line-height: 1.42857143;
color: #222;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#contact_wrapper .genField.auto { width:auto; }
#contact_wrapper textarea.genField { min-height:200px; }
#contact_wrapper .button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
}
#contact_wrapper .f_left { float:left; }
#contact_wrapper .f_radio{ font-weight:normal; display:block; }
#contact_wrapper .submit{ background-color: #337ab7; border-color: #2e6da4; padding:6px 30px; margin-left:10px; }
#contact_wrapper .reset { background-color: #d9534f; border-color: #d43f3a; }
#contact_wrapper .submit:hover{ background-color: #286090; }
#contact_wrapper .reset:hover { background-color: #C9302C; }
#contact_wrapper input.error, #contact_wrapper textarea.error { border: 1px dashed #F41724; }
#contact_wrapper label {
display: block;
width:auto;
line-height: 1.8;
vertical-align: top;
cursor: pointer;
color: #222;
margin-top:12px;
}
#contact_wrapper label.error {font-size:80%; color:#F41724; margin-top:2px; float: right; }
#contact_wrapper .buttons, #contact_wrapper .captcha { margin-top:15px; }
#contact_wrapper .captcha label.f_left { margin:7px 10px inherit inherit;}
#contact_wrapper #results p {
padding: 20px;
color: #FFFFFF;
font-weight: bold;
border-radius: 5px;
}
#contact_wrapper #results p.sending_success { background-color: #337AB7; }
#contact_wrapper #results p.sending_error { background-color: #D9534F; }
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div id="contact_wrapper">
<fieldset id="form_wrapper">
<legend>Contact Form</legend>
<form name="contactme" id="contactme" action="" method="post">
<label for="fname">First Name *</label>
<input type="text" name="fname" id="fname" class="genField" />
<label for="email">Email *</label>
<input type="text" name="email" id="email" class="genField" />
<label for="subject">Subject *</label>
<input type="text" name="subject" id="subject" class="genField" />
<label for="message">Message *</label>
<textarea name="message" id="message" class="genField"></textarea>
<div class="clearfix"></div>
<div class="buttons">
<input type="reset" class="button reset" name="reset" value="X" />
<input type="submit" class="button submit" name="submit" value="Submit Form" />
<span style="float:right; margin-top:8px;">
<a href="http://scriptgenerator.net/html-php-jquery-simple-contact-form-v2/" title="Valid Contact Form">
<img src="http://www.scriptgenerator.net/generator/html-php-contact-form-mailer-generator_files/validform.jpg"
alt="Valid Contact Form" width="20" height="20" />
</a>
</span>
</div>
</form>
</fieldset>
<!-- We will output the results from process.php here -->
<div id="results" style="display:none;"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var msj = "Please enter valid data"; // you can insert here a customized error message
$('#contactme').validate({
debug: false,
rules: {
// You can set rools to validatate fields here
fname: { required: true, minlength:2 },
email: { required: true, email: true },
subject: { required: true, minlength:2 },
message: { required: true, minlength:2 },
},
messages: {
// You can also set a custom message for each field
fname: "Please enter a valid Name",
email: "Please enter a valid email address",
subject: msj,
message: msj,
},
submitHandler: function(form) {
$("#form_wrapper").hide();
// do adicional stuff of form validation
$.post("process.php", $("#contactme").serialize(), function(data) {
$("#results").html(data).show(1000);
});
}
});
});
</script>
和process.php
<?php
// Wait a second to simulate a some latency
usleep(500000);
function m($m, $t=NULL){
return "<p class='".($t=="s"?"sending_success":"sending_error")."'>".$m."</p>";
}
global $email_send_to, $email_recived_from, $success_msj, $error_msj;
// edit email where contact form is sent
$email_send_to = "";
// edit your domain
$email_recived_from = "";
// edit message for a successfully sent contact form
$success_msj = "Your message has been sent. Thank you for your feedback. We will contact you shortly if needed";
// edit error message
$error_msj = "Ups, There has been an error while sending. Please try again in a few minutes or panic appropriately!";
// edit subject here. If user enters no subject, we will use this one
$standard_subject = "Someone contacted you on ".$email_recived_from;
//------------------------------------------------------------------------------------------------//
function secure($post) {
if (is_array($post)):
foreach($post as $item=>$value):
$post[$item] = term( $value ); //This helps not to break code if single or doble cuotes are sent to process
$post[$item] = trim( $value ); // Strip whitespace (or other characters) from the beginning and end of a string
endforeach;
else:
$post = term( $post ); //This helps not to break code if single or doble cuotes are sent to process
$post = trim( $post ); // Strip whitespace (or other characters) from the beginning and end of a string
endif;
$post = mynl2br($post);
// insert here aditional security functions
return $post;
}
//------------------------------------------------------------------------------------------------//
// if someone sends you cods or scripts via contact form, this will prevent it from being interpreted
function mynl2br($post) {
return strtr($post, array("\t"=>" ", "<"=>"<", ">"=>">", "\r\n" => "<br />", "\r" => "<br />", "\n" => "<br />"));
}
//------------------------------------------------------------------------------------------------//
function term($post){
// DO NOT INDENT THIS. adicional spaces are interpreted. This helps not to break code if single or doble cuotes are sent to process
$post = <<<term
$post
term;
return $post;
}
//------------------------------------------------------------------------------------------------//
// Pull out data from contact form
$fname = (isset($_POST['fname'])?secure($_POST['fname']):'');
$email = (isset($_POST['email'])?secure($_POST['email']):'');
$subject = (isset($_POST['subject'])?secure($_POST['subject']):'');
$message = (isset($_POST['message'])?secure($_POST['message']):'');
//------------------------------------------------------------------------------------------------//
$email_recived_from = str_replace ("http://", "", $email_recived_from );
$email_recived_from = str_replace ("www.", "", $email_recived_from );
$from = $email_recived_from." <contact@".$email_recived_from.">";
$mail_subject = (empty($subject)?$standard_subject:$subject);
//------------------------------------------------------------------------------------------------//
//------------------------------------------------------------------------------------------------//
// setting HTML email function
function sendHTMLemail($body,$from, $to, $subject) {
global $success_msj, $error_msj;
$boundary = uniqid("HTMLEMAIL");
$headers = "From: $from\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/alternative;".
"boundary = $boundary\r\n\r\n";
$headers .= "This is a MIME encoded message.\r\n\r\n";
$headers .= "--$boundary\r\n".
"Content-Type: text/html; charset=utf-8\r\n".
"Content-Transfer-Encoding: base64\r\n\r\n";
$headers .= chunk_split(base64_encode($body));
return ( mail($to,$subject,"",$headers,"-f".$from) ? m($success_msj,"s") : m($error_msj) );
}
//------------------------------------------------------------------------------------------------//
ob_start();?>
<html>
<head>
<!--
Lots of email clients strip all head information like CSS style classes.
That is why we included all style directly into the body using span tags.
Table was used for the layout to increase outlook compatibility and other old email clients.
-->
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#8ED4F4" >
<table width="100%" cellspacing="0" bgcolor="#8ED4F4" >
<tr>
<td valign="top" align="center">
<table width="80%" style=" width:80%;min-width:326px;margin-top:10px;" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td style="background-color:#337AB7; text-align:center; padding:10px;" align="center">
<span style="color:#fff;font-family:arial; font-size:140%;">A new person <span style="color:#FF9366">contacted</span> you:</span>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<p>
<span style="font-size:12px;font-weight:normal;color:#666;font-family:arial;line-height:150%;">
<br /><strong>First Name:</strong> <?=$fname?>
<br /><strong>Email:</strong> <?=$email?>
<br /><strong>Subject:</strong> <?=$subject?>
<br /><strong>Message:</strong> <?=$message?>
</span>
</p>
</td>
</tr>
<tr>
<td style="background-color:#337AB7; text-align:center;" align="center" valign="top" colspan="2">
<span style="font-size:11px;color:#fff;line-height:200%;font-family:arial;text-decoration:none;">Contact service provided by <br />
<a style="color:#fff; font-weight:bold; font-size:110%; text-decoration:none;" href="http://scriptgenerator.net" title="scriptgenerator.net">
<span style="color:#FF9366">Script</span>Generator
</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<? $HTML = ob_get_clean();
// display succes or error message depending is email has been sent or not
echo sendHTMLemail($HTML,$from,$email_send_to,$mail_subject);
?>
有两个js文件，jquery-1.4.2-mini.js和jquery.validate.min.js，有需要我可以提供，也可以从表单生成器网站下载。
这是我嵌入它时的样子。
【问题讨论】：
-
您的浏览器控制台会出现哪些错误（如果有）？
-
对于 css 问题，表单的父级或父级中的某些内容正在调整对齐方式。要么删除它，要么将
text-align: left添加到您的#contact_wrapper labelcss 声明中。 -
它一定是我嵌入的页面中的某些内容。如果我自己加载页面而不将其放入其他 html 中，它看起来没问题，并且该过程似乎有效。有没有可能是其他css/php在干扰它？
标签： javascript php html jquery forms