У меня есть 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 code
$(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");
?>