带有PHP回退功能的jQuery联系人表单
我学习了本教程,学习如何使用PHP和jQuery创建联系人表单。 据我所知,这个想法是让jquery工作,让php作为“备份” 我没有遇到任何问题就遵循了教程。或者我是这么想的。。。 但最终jQuery似乎不起作用。验证时,我总是会“闪烁”(页面刷新) 这是我试图使用它的页面: 以下是PHP:带有PHP回退功能的jQuery联系人表单,php,validation,mootools,contact-form,Php,Validation,Mootools,Contact Form,我学习了本教程,学习如何使用PHP和jQuery创建联系人表单。 据我所知,这个想法是让jquery工作,让php作为“备份” 我没有遇到任何问题就遵循了教程。或者我是这么想的。。。 但最终jQuery似乎不起作用。验证时,我总是会“闪烁”(页面刷新) 这是我试图使用它的页面: 以下是PHP: // Set email variables $email_to = 'luis_bento@hotmail.com'; $email_subject = 'Message from DCCF site
// Set email variables
$email_to = 'luis_bento@hotmail.com';
$email_subject = 'Message from DCCF site';
// Set required fields
$required_fields = array('fullname','email','comment');
// set error messages
$error_messages = array(
'fullname' => 'Please enter a Name to proceed.',
'email' => 'Please enter a valid Email.',
'comment' => 'Please enter a Message to continue.'
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<div id="formWrap">
<h2>If you like our project, have any questions, or would like more information, please send us a message.</h2><!-- end of "Form Message" h2 -->
<div id="form">
<?php if($form_complete === FALSE): ?>
<form action="dccf.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name:</div><!-- end of .label -->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
</div><!-- end of .input -->
<div class="context">e.g. John Smith or Jane Doe</div><!-- end of .context -->
</div><!-- end of .row -->
<div class="row">
<div class="label">Your Email:</div><!-- end of .label -->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
</div><!-- end of .input -->
<div class="context">e.g. youremail@somewhere.com</div><!-- end of .context -->
</div><!-- end of .row -->
<div class="row">
<div class="label">Your Message:</div><!-- end of .label -->
<div class="input">
<textarea id="comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div><!-- end of .input -->
</div><!-- end of .row -->
<div class="submit">
<input type="submit" id="submit" name="submit" value"Send Message" />
</div><!-- end of .submit -->
</form>
<?php else: ?>
<p class="thanks">Thank you for your Message! We will get back to you as soon as possible.</p>
<?php endif; ?>
</div><!-- end of #form -->
</div><!-- end of #formWrap -->
谢谢你的帮助!
=)
编辑:
控制台上出现两个错误(加载页面时,没有一个提交表单):
- 未识别并忽略视口参数键“宽度\设备宽度”。php:8
- TypeError:“undefined”不是一个函数(评估“form.addEvent”)validation.js:4
- 如果只填写了后面的一个字段,则不再允许提交
- 使用的不是string.test(regex),而是正确的regex.test(string)
- 正在使用全名而不是名称作为名称字段
- 每次按“提交”时,重置都有效
- 由于您的代码存在许多问题,我已删除了以前的答案
这里是jQuery的等价项,删除了所有错误,因此
$(函数(){
//拿到表格
变量形式=$('注释形式');
//如果找到表格。。。
如有需要(表格){
//输入错误消息的错误函数
var addError=函数(字段,消息){
field.addClass('error');//将error类添加到字段
var error=field.parent()
error.html(msg);//错误文本msg
field.after(error);//在字段后面插入错误消息
};
//detach error函数用于删除任何错误消息并删除错误类
var removeError=函数(字段){
field.removeClass('error');//从表单字段中删除error类
var error=field.parent().find('span');//查找任何现有的错误消息
//如果出现错误消息,请销毁
如果(错误){
错误。删除();
}
};
//插入提交表单事件
表格(‘提交’)功能(e){
//设置默认状态
var isValid=true;
//测试名称长度
变量名称=$(“#全名”);
if(name.val().length==0){
isValid=false;
加法器(名称、名称错误);
}否则{
删除错误(名称);
}
//检查电子邮件长度
var email=$(“#email”);
var emailVal=email.val();
如果(emailVal.length==0){
isValid=false;
添加错误(电子邮件、电子邮件错误);
//检查电子邮件有效性
}如果(!/^([a-zA-Z0-9\+\\-]+)(\.[a-zA-Z0-9\+\\-]+)*@([a-zA-Z0-9\-]+)+[a-zA-Z]{2,6}$/.测试(emailVal)){
isValid=false;
添加错误(电子邮件、电子邮件错误);
}否则{
删除错误(电子邮件);
}
//检查注释长度
var注释=$(“#注释”);
console.log(comment.val())
if(comment.val().length==0){
isValid=false;
加法器(注释,注释错误);
}否则{
删除错误(注释);
}
//如果表单无效,则停止事件发生
如果(!isValid){
e、 预防默认值();
}
});
}
});
是。我不知道有控制台!很抱歉因此,错误是:Typeerror:“undefined”不是一个函数(评估'form.addEvent')validation.js:4还有一个cuple其他错误,但我认为这是一个与IE和Chrome中的这个topicHit F12和FX相关的错误,如果安装了@mplungjan,错误是:未识别和忽略视口参数键“width\u device-width”。dccf.php:8 TypeError:“undefined”不是一个函数(评估'form.addEvent')validation.js:4你知道这是什么意思吗?这意味着你问错了地方。它不是jQuery。我会给你换标签我能做什么?使用最新版本的mootools?我刚刚尝试使用最新版本的mootools,我得到了相同的结果=(你的小提琴工作得很好。我是一个非常初学者,我真的找不到问题所在。如果我发布完整的代码(dccf.pfp文件中的完整代码)会有帮助吗)?我正在使用另一个jquery脚本制作照片滑块,这可能是他们“干扰”的原因吗相互之间?是的,在你的小提琴中很好。请告诉我,我必须做什么?将小提琴上的Java脚本复制到我的“validation.js”中?PHP呢,一切都一样?(谢谢你的帮助!我真的很迷茫……)获取我在上面发布的代码,并使用它替换站点上名为/test/contact/validation/validation.js的文件。然后删除mootools(如本页第17、18和19行所示:查看源代码:http://dccf.site88.net/test/dccf.php
)-那你就完了
<script type="text/javascript">
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var commentError = '<?php echo $error_messages['comment']; ?>';
</script>
window.addEvent('domready', function() {
// Get the form
var form = $('comments_form');
// if the form is found...
if (form) {
// obtain error fields
var name = $('fullname');
var email = $('email');
var comment = $('comment');
// Set the default status
var isValid = true;
// input error function for the error messages
var addError = function (field, msg) {
field.addClass('error'); // Add error class to field
var error = field.getParent().getElement('span') || new Element('span', {'class': 'error'}); // add error message if not already placed
error.set('text', msg); // error text msg
error.inject(field, 'after'); // Insert error message after field
};
// detach error function used to delete any error messages and remove the error class
var removeError = function (field) {
field.removeClass('error'); // Remove error class from form fields
var error = field.getParent().getElement('span'); // find any existing error messages
// destroy if error message
if (error) {
error.destroy();
}
};
// insert submit form event
form.addEvent('submit', function (e) {
// Test name length
if (name.get('value').length === 0) {
isValid = false;
addError(name, nameError);
} else {
isValid = true;
removeError(name);
}
// check email length
if (email.get('value').length === 0) {
isValid = false;
addError(email, emailError);
// check email validity
} else if (!email.get('value').test(/^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/)) {
isValid = false;
addError(email, emailError);
} else {
isValid = true;
removeError(email);
}
// check comment length
if (comment.get('value').length === 0) {
isValid = false;
addError(comment, commentError);
} else {
isValid = true;
removeError(comment);
}
// If form invalid then stop event happening
if (!isValid) {
e.stop();
}
});
}
});
$(function() {
// Get the form
var form = $('#comments_form');
// if the form is found...
if (form) {
// input error function for the error messages
var addError = function (field, msg) {
field.addClass('error'); // Add error class to field
var error = field.parent().find('span') || $('<span>', {'class': 'error'}); // add error message if not already placed
error.html(msg); // error text msg
field.after(error); // Insert error message after field
};
// detach error function used to delete any error messages and remove the error class
var removeError = function (field) {
field.removeClass('error'); // Remove error class from form fields
var error = field.parent().find('span'); // find any existing error messages
// destroy if error message
if (error) {
error.remove();
}
};
// insert submit form event
form.on('submit', function (e) {
// Set the default status
var isValid = true;
// Test name length
var name = $("#fullname");
if (name.val().length === 0) {
isValid = false;
addError(name, nameError);
} else {
removeError(name);
}
// check email length
var email = $("#email");
var emailVal = email.val();
if (emailVal.length === 0) {
isValid = false;
addError(email, emailError);
// check email validity
} else if (!/^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/.test(emailVal)) {
isValid = false;
addError(email, emailError);
} else {
removeError(email);
}
// check comment length
var comment = $("#comment");
console.log(comment.val())
if (comment.val().length === 0) {
isValid = false;
addError(comment, commentError);
} else {
removeError(comment);
}
// If form invalid then stop event happening
if (!isValid) {
e.preventDefault();
}
});
}
});