联系表单验证以防止空白电子邮件答案

【问题标题】：Contact form validation to prevent blank emails联系表单验证以防止空白电子邮件
【发布时间】：2021-08-15 09:55:42
【问题描述】：

我在 php/js 方面没有经验，但我正在尝试在 Wordpress 中构建一个自定义联系表单，到目前为止，在学习了一些教程并阅读了很多东西之后，我设法使它足够将表格的内容发送到我的电子邮件。那部分很好，但我相信我错过了验证部分，因为即使字段为空或未按要求填写，我仍然能够将消息发送到我的电子邮件。我试图尽可能简化代码，以免在此处保留太长时间，如果无法理解，请告诉我。

<html>
<body>
<div id="successmail" style="display:none">MESSAGE SENT</div>
<div id="errormail" style="display:none">MESSAGE NOT SENT</div>
    
 <form id="enquiry" method="post" name="enquiry">
  <div class="form">
   <input type="text" class="fname" name="fname" placeholder="" pattern="[a-zA-Z]{1,36}" required> 
   <label for="namef">Your name</label>
  </div>
  <div class="form">
   <input type="text" class="lname" name="lname" placeholder="" pattern="[a-zA-Z]{1,36}" required> 
   <label for="lname">Your surname</label>
  </div>
  <div class="form">
   <input type="email" class="email" name="email" placeholder="" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required > 
   <label for="email">Your email</label>
  </div>
  <div class="form">
   <select class="select" name="title" required>
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
   </select>
  </div>
  <div class="form2">
   <textarea class="message" name="message" placeholder="" required></textarea> 
   <label for="tellme">Your message</label>
   </div>
  <div class="contactbutton">
    <button class="button" role="button" type="submit">SEND</button>
  </div>
</form>
    
<script>
(function($){

 $('#enquiry').submit( function(event){

                event.preventDefault();

                var endpoint = '<?php echo admin_url('admin-ajax.php');?>';

          var form = $('#enquiry').serialize();

                var formdata = new FormData;

                formdata.append('action', 'enquiry');
                formdata.append('enquiry', form);

                $.ajax(endpoint, {
                     type:'POST',
                     data:formdata,
                     processData: false,
                     contentType: false,

                     success: function(res){

                         $('#enquiry').fadeOut(200);

                         $('#successmail').show();

                         $('#enquiry').trigger('reset');

                     },

                     error: function(err){

                         $('#errormail').show();

                     }
                })
        })
      })(jQuery)

</script>
</body>
</html>

functions.php 文件中也有这部分，它实际发送电子邮件

add_action('wp_ajax_enquiry', 'enquiry_form');
add_action('wp_ajax_nopriv_enquiry', 'enquiry_form');
function enquiry_form()
{
     $formdata = [];
     wp_parse_str($_POST['enquiry'], $formdata);

     //Admin email
     $admin_email = get_option('admin_email');

     //Email Headers
     $headers[] = 'Content-Type: text/html; charset=UTF-8';
     $headers[] = 'From: ' . $formdata['fname'] . '  <' . $admin_email . '>';
     $headers[] = 'Reply-to:' . $formdata['email'];

     //Who are we sending the email to?
     $send_to = $admin_email;

     //Subject
     $subject = $formdata['title'];

     //Message
     $message = '<strong>From:</strong>' . $formdata['fname'] . $formdata['lname'] . '<br />' .
                '<strong>Email:</strong>' . $formdata['email'] . '<br />' . '<br />' .
                $formdata['message'];
        ;

        try {
            if(wp_mail($send_to, $subject, $message, $headers) )
            {
                wp_send_json_success('Email sent');
            }
            else {
                wp_send_json_error('Email error');
            }
        } catch (Exception $e)
        {
            wp_send_json_error($e->getMessage());
        }

   wp_send_json_success( $formdata['fname'] );
}
?>

如果有人可以帮助我找出此处缺少的内容，以防止在未正确填写字段时发送电子邮件，我将非常高兴。一段时间以来，我一直在尝试自己寻找答案，但对于如何做到这一点，我仍然没有很清楚的想法。非常感谢。

【问题讨论】：

我不明白这个问题。您是否只想验证字符串是否为空？ if (!empty($_POST["enquiry"])) { ... }
我想验证字符串是否根据每个输入类的“模式”字段的要求填充，所以它不仅仅是为空（但自然，不为空是其中之一通过电子邮件发送表格的条件），但我不知道我应该在哪里以及如何做

标签： php html jquery ajax wordpress

【解决方案1】：

因为你还没有在你的 ajax 回调函数中编写任何验证代码。

要验证您的表单，您必须在发送电子邮件之前检查每个输入字段的数据。这是一个例子。

if(isset($_POST)){ 

    if(!isset($_POST['fname']) && $_POST['fname'] == '') {
        wp_send_json_error('Please enter first name')
    }

    ...

}

上面的代码示例是在发送电子邮件之前应该如何检查它的示例。 wp_send_json_error 会在 ajax 响应中触发错误，因此您将能够在客户端显示它。

虽然数据清理对电子邮件的要求并不高，但在将输入存储到数据库时建议这样做。

【讨论】：

谢谢你，对我的无能感到抱歉，但我还是个初学者，所以我仍然无法理解一些东西。我应该在哪些代码行中插入这些检查以及如何将它们与其余部分连接起来？

【解决方案2】：

好的，我设法让它工作，所以我分享它以防有人需要类似的东西。我在变量中转换了表单类，然后在调用 ajax 函数之前添加了一个 if，如下所示：

<script>
(function($){

   $('#enquiry').submit( function(event){

    event.preventDefault();

    var fname = $.trim($('.fname').val());
    var lname = $.trim($('.lname').val());
    var email = $.trim($('.email').val());
    var subject = $.trim($('.select').val());
    var message = $.trim($('.message').val());

    if (fname === '' || lname === '' || email === '' || subject === '' || message === ''){          
         return false;
        }

        else{

         var endpoint = '<?php echo admin_url('admin-ajax.php');?>';

         var form = $('#enquiry').serialize();

         var formdata = new FormData;

         formdata.append('action', 'enquiry');
         formdata.append('enquiry', form);

         $.ajax(endpoint, {
         type:'POST',
         data:formdata,
         processData: false,
         contentType: false,

         success: function(res){

           $('#enquiry').fadeOut(200);

           $('#successmail').show();

           $('#enquiry').trigger('reset');

              },

           error: function(err){

           $('#errormail').show();

             }
            })
            }
        })

      })(jQuery)
</script>

【讨论】：

这只会在字段为空的情况下阻止发送表单，谁能告诉我如何调整它以检查每个变量是否遵守模式？
无论您在 javascript 上做什么验证，它都是客户端的，用户可以轻松更改。虽然，它有利于用户体验和第一层验证。但是，最好在服务器端验证输入。在你的情况下，一个ajax回调函数。在 javascript 中序列化表单数据后，它应该可以在带有$_POST 变量的回调函数中使用。比如$_POST['fname']这里，你可以按照我问题中的代码示例在PHP中进行验证。