javascript - 表单验证不验证

标签 javascript php html css

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

任何想法都很好，还有如何让我的确认消息内联显示而不带我进入新页面？

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>

最佳答案

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

->以下是使用 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: 使用 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将特殊字符转换为 HTML 实体的函数 OR 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!";

?>

关于javascript - 表单验证不验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58784608/

上一篇：css - react native : Adding borderColor creates subtle box shadow

下一篇：html - 如何将文本宽度与动态大小的图像/标题的宽度相匹配？

相关文章：

javascript - 检测一个点是否属于线段

php - jQuery $.post 不返回 JSON 数据

php - 在远程服务器上安装 Xdebug 以进行分析

javascript - 循环数组数组并将值递增到新数组中

javascript - 谷歌地图绘制模式测量距离

javascript - angularjs中的拆分函数

javascript - jQuery 未绑定(bind)到表单，

html - CSS:第二个 iframe 不会呈现

javascript - 输入数量并更新总订单

javascript - .text() 不适用于选择表单输入

©2024 IT工具网  联系我们