Forms 在弹出窗口中验证meesage并将其返回给用户的模式表单

我是新来的，一直在网上寻找一个例子，但找不到一个。我有一个模式弹出表单，我希望能够验证，电子邮件和返回一个成功或错误的消息在弹出窗口。有谁能帮我或给我指出正确的方向吗。我有一个模式按钮，当点击打开表单

模态按钮

<a href='#' data-toggle='modal' data-target='#sendModal' class='btn btn-default' title='Send to a friend'><i class='fa fa-send'></i> <span>Send to a friend</span></a>

形式

&时代；
寄给朋友
此选项无法正常工作。

---

你的问题太宽泛了。不能给你完整的工作示例，但可以为你指出正确的方向

首先，您需要

验证插件

来验证表单输入，因为您使用的是bootstrap框架，最好的选择是您可以找到许多工作示例或，您可以找到工作示例，但我将使用

BootstrapValidator插件

验证后，您要求发送电子邮件（但不刷新页面，因为您希望在模式中显示成功或错误消息）

对于这一步，您需要Ajax来传递经过验证的输入值并返回响应

如果您查看此页面，您将发现一个示例

使用Ajax提交表单
并返回您可以使用的响应（成功或错误）

HTML

在上次创建
file.php时

<?php
if (isset($_POST['username'])) {
   //Get Post Values from Ajax Request
   //Send Email Use PHP mailer https://github.com/Synchro/PHPMailer
   //Check success or errors with if / else condition e.g
   if($mail->send()) {
      echo"<div class="alert alert-success fade in"> Everything is good and working.</div>";
   } else {
      echo"<div class="alert alert-error fade in"> There is something seriously wrong or may be something not working as plan.</div>";
   }
}
?>



注1：上述代码示例未经过充分测试

注2：在使用jQuery和Ajax时，请始终检查浏览器控制台日志中的错误以获取提示

<a href='#' data-toggle='modal' data-target='#sendModal' class='btn btn-default' title='Send to a friend'><i class='fa fa-send'></i> <span>Send to a friend</span></a>

<div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4>Send to a friend</h4>
             <div id="message"></div>
        </div>
        <div class="modal-body">
            <form id="signup" class="form-horizontal" role="form" method="POST" action="#" data-bv-submitbuttons="button[type='submit']">
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>

                            <label class="control-label"></label>
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <input type="submit" class="btn btn-primary pull-right" value="Submit">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

$('#signup').bootstrapValidator({
  message: 'This value is not valid',
  submitButton: '#signup button[type="submit"]',
  submitHandler: function(validator, form, submitButton) {
      $.ajax({
          type: 'POST',
          url: 'file.php', //Here you handle the Post request via Ajax
          data: $(form).serialize(),
          success: function(result) {
              $("#message").html(result); //This will show the message in modal
              $("#signup").data('bootstrapValidator').resetForm(); //This will reset the form inputs after success call.
          }
      });
      return false;
  },
  feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        }
                    }
                }
            }
        });
    });

<?php
if (isset($_POST['username'])) {
   //Get Post Values from Ajax Request
   //Send Email Use PHP mailer https://github.com/Synchro/PHPMailer
   //Check success or errors with if / else condition e.g
   if($mail->send()) {
      echo"<div class="alert alert-success fade in"> Everything is good and working.</div>";
   } else {
      echo"<div class="alert alert-error fade in"> There is something seriously wrong or may be something not working as plan.</div>";
   }
}
?>