时间戳

首页 > 解决方案 > 表单验证未验证

javascript - 表单验证未验证

问题描述

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

任何想法都会很棒，我怎样才能让我的确认消息内联显示而不带我进入新页面？

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>

标签： javascriptphphtmlcss

解决方案

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

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

HTML：在您不会为空的字段中添加“必填”，并确保电子邮件字段类型为“电子邮件”而不是“文本”(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：使用事件监听器而不是 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函数将特殊字符转换为 HTML 实体或 strip_tags函数从字符串中去除 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!";

?>

推荐阅读