bootstrap contact form validation error


Topic: bootstrap contact form validation error

Jonathan Washington pro asked 7 years ago

I follow the instructions on this page to setup validation for my contact form. The form sends an email but still returns an "Error!" message.

javascript validation

/**
 * Form validation
 */
 <script>
 
 $(function validateForm() {
 $('form').on('submit', function (e) {

e.preventDefault();
 var name = document.getElementById('contact-name').value;
 if (name == "") {
 document.getElementById('status').innerHTML = "Name cannot be empty";
 return false;
 }
 var email = document.getElementById('contact-email').value;
 if (email == "") {
 document.getElementById('status').innerHTML = "Email cannot be empty";
 return false;
 }
 var tel = document.getElementById('contact-tel').value;
 if (tel == "") {
 document.getElementById('status').innerHTML = "Phone number cannot be empty";
 return false;
 } else {
 var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
 if(!re.test(email)){
 document.getElementById('status').innerHTML = "Email format invalid";
 return false;
 }
 }
 var subject = document.getElementById('contact-subject').value;
 if (subject == "") {
 document.getElementById('status').innerHTML = "Subject cannot be empty";
 return false;
 }
 var message = document.getElementById('contact-message').value;
 if (message == "") {
 document.getElementById('status').innerHTML = "Message cannot be empty";
 return false;
 }
 document.getElementById('status').innerHTML = "Sending...";
 formData = {
 'contact-name' : $('input[name=contact-name]').val(),
 'contact-email' : $('input[name=contact-email]').val(),
 'contact-tel' : $('input[name=contact-tel]').val(),
 'contact-subject' : $('input[name=contact-subject]').val(),
 'contact-message' : $('textarea[name=contact-message]').val()
 };


 $.ajax({
 url : "<?php echo get_template_directory_uri(); ?>/mail.php",
 type: "POST",
 data : formData,
 success: function(data, textStatus, jqXHR)
 {
 $('#status').text(data);
 },
 error: function (jqXHR, textStatus, errorThrown)
 {
 $('#status').text(jqXHR);
 }
 });


 });
 });
 </script>

PHP validation

<?php
if(isset( $_POST['contact-name']))
 $name = $_POST['contact-name'];
if(isset( $_POST['contact-email']))
 $email = $_POST['contact-email'];
if(isset( $_POST['contact-tel']))
 $tel = $_POST['contact-tel'];
if(isset( $_POST['contact-subject']))
 $subject = $_POST['contact-subject'];
if(isset( $_POST['contact-message']))
 $message = $_POST['contact-message'];
if ($name === ''){
 echo "Name cannot be empty.";
 die();
}
if ($email === ''){
 echo "Email cannot be empty.";
 die();
} else {
 if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
 echo "Email format invalid.";
 die();
 }
}
 if ($tel === ''){
 echo "Phone number cannot be empty.";
 die();
}
if ($subject === ''){
 echo "Subject cannot be empty.";
 die();
}
if ($message === ''){
 echo "Message cannot be empty.";
 die();
}

$content="From: $name \n Email: $email \n Phone number:$tel \n Message: $message";
$recipient = 'kimpope1@cox.net';
$header = 'BCC: jonwashdesigns@gmail.com'.PHP_EOL;
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader, $header) or die("Error!");
echo "Email sent!";
?>

Witold Tkaczyk commented 7 years ago

Hello Jonathan, can you show us your response and data that you send?

Jonathan Washington pro commented 7 years ago

I'm sorry I don't understand the question

Witold Tkaczyk commented 7 years ago

ok, let's try another way. Can you show me a print screen with your error?

Witold Tkaczyk commented 7 years ago

you can also try to replace this: mail($recipient, $subject, $content, $mailheader, $header) or die("Error!"); echo "Email sent!"; with this: if (!mail($recipient, $subject, $content, $mailheader, $header)) { echo "Error!"; } else { echo "Email sent!" }

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes