javascript - 尝试在发送前验证我的电子邮件表单
问题描述
我在这里有 html,我将 javascript 代码导入其中,以在发送之前验证表单字段是否包含信息。我查看了其他一些答案并尝试了不同的解决方案,但我似乎无法修复它。还有一些 PHP 代码应该从文本字段中获取输入并将它们发送到我的电子邮件。除了来自 JS 代码的验证过程不起作用之外,这工作正常,因此无需在表单中输入任何内容即可发送电子邮件。
现在解释我尝试的基本上是将类#id添加到按钮然后调用它
<script src="js/contact.js"></script>
<form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">
<div class="emailAddress">
<div class="col-12">
<div class="form-group">
<textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder = 'Enter Message'></textarea>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder = 'Enter your name'>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder = 'Enter email address'>
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder = 'Enter Subject'>
</div>
</div>
</div>
<div class="form-group mt-3">
<button type="button" class="button button-contactForm btn_4 boxed-btn" id="PleaseWork" onClick="">Send Message</button>
</div>
</form>
contact.js 代码
$(document).ready(function(){
(function($) {
"use strict";
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value)
}, "type the correct answer -_-");
// validate contactForm form
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 4
},
number: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 20
}
},
messages: {
name: {
required: "come on, you have a name, don't you?",
minlength: "your name must consist of at least 2 characters"
},
subject: {
required: "come on, you have a subject, don't you?",
minlength: "your subject must consist of at least 4 characters"
},
number: {
required: "come on, you have a number, don't you?",
minlength: "your Number must consist of at least 5 characters"
},
email: {
required: "no email, no message"
},
message: {
required: "um...yea, you have to write something to send this form.",
minlength: "thats all? really?"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact_process.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 1, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn()
$('.modal').modal('hide');
$('#success').modal('show');
})
},
error: function() {
$('#contactForm').fadeTo( "slow", 1, function() {
$('#error').fadeIn()
$('.modal').modal('hide');
$('#error').modal('show');
})
}
})
}
})
})
})(jQuery)
})
contact_process.php
<?php
$to = "Myemail@email.com";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$subject = $_REQUEST['subject'];
//$number = $_REQUEST['number'];
$cmessage = $_REQUEST['message'];
$headers = "From: $from";
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject = "You have a message from your Bitmap Photography.";
$logo = 'img/logo.png';
$link = '#';
$body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
$body .= "<table style='width: 100%;'>";
$body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
$body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
$body .= "</td></tr></thead><tbody><tr>";
$body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
$body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
$body .= "</tr>";
$body .= "<tr><td style='border:none;'><strong>Subject:</strong> {$subject}</td></tr>";
$body .= "<tr><td></td></tr>";
$body .= "<tr><td colspan='2' style='border:none;'>{$cmessage}</td></tr>";
$body .= "</tbody></table>";
$body .= "</body></html>";
mail($to, $subject, $body, $headers);
//echo("Email was sent successfully");
?>
解决方案
您需要使用带插件或不带插件的 Javascript 和 PHP 进行验证
推荐阅读
- excel - 如何重新运行记录的数据透视表宏?
- c++ - 为什么在函数中本地 ctor 没有调用,但 dtor 被调用
- mongodb - 是否可以通过 ID 在子数组中找到特定元素并仅编辑该元素?
- excel - 是否有将数据从一个单元格转换为表格的公式?
- google-sheets - 过滤表格与 Excel 后计算第一个可见行的公式
- python-3.x - 如何通过 get 应用不记名令牌?
- algorithm - 如何定义一个未知大小的缓冲区
- python - conda list 看不到使用 pip 安装的软件包
- android - 忽略 Alpha 并覆盖目标的 Porter Duff 模式
- c# - 更改列表视图的高度