Question

我在 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'] );
}
?>

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

Answer 1

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

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

if(isset($_POST)){ 

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

    ...

}

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

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

Answer 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>

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

2 个答案: