验证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视图？ 我想将SUBMIT按钮的文本更改为“Message Sent”或类似的东西，然后清除表单字段。 这样他们就会留在联系页面上。

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

Answer 1

是的，一切皆有可能。

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

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

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

你会寻找$.post()函数。 但是，我喜欢尽可能多地控制，所以我使用$.ajax()函数。

它们都会处理URL和数据，因此这对您非常有用。

您可以在$.ajax()的“success：”参数或$.post()的成功回调中处理成功的返回（可能是使用特定成功代码进行处理$.post() 。
从该函数内部，您可以使用CSS选择器和jQuery函数（如.html()更改DOM元素的内容（如示例中的按钮.html() 。

以下是一些使用jQuery开始的教程 ！

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

总之，您可以在jQuery中使用$.post()或$.ajax()将数据传递到服务器进行处理。

Answer 2

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

PHP真实性令牌

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;
}