Question

因此，我试图在我的网站页脚中的一个简单联系表单上进行验证，即使我没有在任何字段中输入任何文本，我也会收到发送该表单的确认消息。

任何想法都很棒，而且如何在不带我进入新页面的情况下使确认消息显示为内联？

HTML

<div class="container">
<!--Grid column-->
<div class="col-md-8">
<form id ="contact-form" name="contact-form" action="mail.php" method="POST"  onsubmit="return validateForm()" >
<!--Grid row-->
<div class="row">

<!--Grid column-->
<div class="col-md-6">
<div class="form-group Custom_contact">
<div class="md-form">
<input type="text" id="name" name="name" class="form-control" placeholder="Name">
<label for="name" class="">Name</label>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="form-group Custom_contact">
<div class="md-form">
<input type="text" id="email" name="email" class="form-control" placeholder="Email Address">
<label for="email" class="">Your email</label>
</div>
</div>
</div>
<!--Grid column-->

</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="form-group Custom_contact">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->

<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">

<div class="form-group Custom_contact">
<textarea type="text" id="message" name="message" class="form-control" placeholder="Message here"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<!--Grid row-->
</div>
</form>
<button class="the-button call-to-button btn-main btn-project" style="background-color: #00ffc4; float: right; margin-top: 0px;">
<a onclick="validateForm()" class="btn-all">Send Message <i class="fa fa-arrow-right"></i></a>
<div class="button-mask"></div>
</a>
</button>

php

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
$content="From: $name \n Email: $email \n Message: $message";
$recipient = "myemail@gmail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
echo "Email sent!";
?>

JS

                    <script>

                        function validateForm() {
                            var x =  document.getElementById('name').value;
                            if (x == "") {
                                document.getElementById('status').innerHTML = "Name cannot be empty";
                                return false;
                            }
                            x =  document.getElementById('email').value;
                            if (x == "") {
                                document.getElementById('status').innerHTML = "Email 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(x)){
                                    document.getElementById('status').innerHTML = "Email format invalid";
                                    return false;
                                }
                            }
                            x =  document.getElementById('subject').value;
                            if (x == "") {
                                document.getElementById('status').innerHTML = "Subject cannot be empty";
                                return false;
                            }
                            x =  document.getElementById('message').value;
                            if (x == "") {
                                document.getElementById('status').innerHTML = "Message cannot be empty";
                                return false;
                            }
                            document.getElementById('status').innerHTML = "Sending...";
                            document.getElementById('contact-form').submit();

                        }
                    </script>

Answer 1

为了获得更好的安全性和最佳实践，您必须检查客户端和服务器端的输入验证。

-> 以下是使用 HTML ， JavaScript 和 PHP 的方法：

HTML：在字段中添加“ required”（必填），确保它们为空，并确保电子邮件字段类型为“ email”而非“ text” (type="email")

<div class="container">
<!--Grid column-->
<div class="col-md-8">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">

<!--Grid column-->
<div class="col-md-6">
<div class="form-group Custom_contact">
<div class="md-form">
<input type="text" id="name" name="name" class="form-control" placeholder="Name" required>
<label for="name" class="">Name</label>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="form-group Custom_contact">
<div class="md-form">
<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>
<label for="email" class="">Your email</label>
</div>
</div>
</div>
<!--Grid column-->

</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="form-group Custom_contact">
<input type="text" id="subject" name="subject" class="form-control" required>
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->

<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">

<div class="form-group Custom_contact">
<textarea type="text" id="message" name="message" class="form-control" placeholder="Message here" required></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<!--Grid row-->
</div>
</form>
<button class="the-button call-to-button btn-main btn-project" style="background-color: #00ffc4; float: right; margin-top: 0px;">
<a class="btn-all">Send Message <i class="fa fa-arrow-right"></i></a>
<div class="button-mask"></div>
</a>
</button>

JAVASCRIPT：：使用event listener代替onclick，以便您可以阻止表单提交并检查空白字段和有效的电子邮件地址，而无需发送数据

const contactForm = document.getElementById('contact-form');

if (contactForm) {
   contactForm.addEventListener('submit', validateForm);
}

function validateForm(e) {
   var x = document.getElementById('name').value;
   if (x == "") {
      document.getElementById('status').innerHTML = "Name cannot be empty";
      e.preventDefault();
      return;
   }

   x = document.getElementById('email').value;

   if (x == "") {
      document.getElementById('status').innerHTML = "Email cannot be empty";
      e.preventDefault();
      return;
   } 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(x)) {
         document.getElementById('status').innerHTML = "Email format invalid";
         e.preventDefault();
         return;
      }
   }

   x = document.getElementById('subject').value;

   if (x == "") {
      document.getElementById('status').innerHTML = "Subject cannot be empty";
      e.preventDefault();
      return;
   }

   x = document.getElementById('message').value;

   if (x == "") {
      document.getElementById('status').innerHTML = "Message cannot be empty";
      e.preventDefault();
      return;
   }

   document.getElementById('status').innerHTML = "Sending...";
}

PHP：：先检查数据是否已发送，然后使用htmlspecialchars func将特殊字符转换为HTML实体 OR strip_tags func以剥离HTML和来自字符串的PHP标签，最后使用filter_var检查电子邮件的有效性。

<?php

// Checking for sent fields
if(!isset($_POST['name'], $_POST['email'], $_POST['message'], $_POST['subject'])){
   echo "Error! You have to fill in all required fields";
   exit();
}

$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$subject = htmlspecialchars($_POST['subject']);

// Checking for empty fields
if(empty($name) || empty($email) || empty($message) || empty($subject)){
   echo "Error! You have to fill in all required fields";
   exit();
}

// Check email validation
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
   echo "Error! Email address considered invalid.";
   exit();
}

$content="From: $name \n Email: $email \n Message: $message";
$recipient = "myemail@gmail.com";
$mailheader = "From: $email \r\n";

mail($recipient, $subject, $content, $mailheader) or die("Error!");
echo "Email sent!";

?>

Answer 2

您可以在输入字段中使用required参数，例如：

<input type="text" id="name" name="name" class="form-control" placeholder="Name" required>

还可以在电子邮件输入字段中使用类型email，因此您也可以在此字段中输入电子邮件验证

<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>

表单验证未验证

2 个答案: