验证 PHP 表单并更改提交按钮而不是重定向到状态页面

Question

我有一个基本的 PHP 表单，提交时会发送电子邮件：

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    </p>
</form>

此表单运行良好，但我目前没有验证，因此即使字段为空白也提交表单。难道不能用jquery做验证吗？

一旦提交表单，它就会发布到 codeigniter 中的控制器文件，该文件使用 codeigniter 中的电子邮件帮助程序执行电子邮件发送逻辑。见这里：

if($this->email->send())
    {
        echo 'Message has been sent';
    }
    else
    {
        show_error($this->email->print_debugger());
    }

如您所见，这会重定向到 email_form 视图并回显结果。是否可以只停留在具有表单的同一个联系页面上并在那里显示帖子的结果，而不是重定向到<?=base_url()?>contact/email_form 视图？我正在考虑将提交按钮的文本更改为“已发送消息”或类似的内容，然后清除表单字段。这样他们就可以留在联系页面上。

这一切都可以用 jquery 实现吗？谢谢！

Answer 1

是的，一切皆有可能。

具体来说，你会做这样的事情：

$( '#submitbutton' ).click(function(){
    $.ajax(); //do ajax

    return false; //should override default form submission
});

您会寻找$.post() 函数。不过，我喜欢尽可能多地进行控制，所以我使用了$.ajax() 函数。

它们都需要处理 URL 和数据，所以这对您非常有用。

您将在$.ajax() 的“success:”参数或$.post() 的成功回调中处理成功返回（可能带有特定的成功代码要处理）。
在该函数内部，您可以使用 CSS selectors 和 jQuery 函数（如 .html()）更改 DOM 元素的内容（如示例中的按钮）。

这里是some tutorials 开始使用 jQuery！

请记住，仅验证电子邮件是不够的。您还需要检查其他可能性！
此外，请确保在服务器上在 POST 之后进行验证。 Javascript 可以关闭，然后（如果您在浏览器上进行验证）您的所有验证将无任何作用来保护您的服务器或一般公众。

综上所述，你可以在jQuery中使用$.post()或$.ajax()将数据传递给你的服务器进行处理。

Answer 2

您应该始终进行服务器验证，因为用户可能禁用了 javascript。我将验证每个输入的允许值，以便您的应用程序是安全的，并且您不会变成垃圾邮件大炮。我会通过向表单添加一个令牌来做到这一点，以确保您的应用程序是创建表单的应用程序，因此可以继续发送电子邮件的部分。请参阅以下相关帖子：

PHP Authenticity Tokens

Answer 3

我今天早上基本上做了同样的事情：

$('#contact_form').submit(function() {
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
        return false;
    }
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      {name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
      function(data) {
          // this checks the return value from the submit
          if (data == 'Message has been sent') {
               // do something
               $('#contact p.alt').html('Message Sent');
          } else {
               // the send email function returned something other than success
               alert('failed');
          }
      }
    return false;
}