Bootstrap Validator - 将所有输入字段值发送到远程 PHP 文件答案

【问题标题】：Bootstrap Validator - Send all input field values to remote PHP fileBootstrap Validator - 将所有输入字段值发送到远程 PHP 文件
【发布时间】：2014-11-26 06:58:28
【问题描述】：

我想知道是否有办法使用 Bootstrap Validator 将我的所有输入字段值发送到远程 PHP 文件。

为了解释，我在一个登录表单中有两个输入字段。我在两个输入字段上都使用了 Bootstrap Validator 的远程验证。每个验证只发送请求的输入字段的值，并且无法通过 PHP 后端中的$_POST 访问其他输入字段。

我知道我可以使用 data 选项将数据发送到 PHP 后端，但我不确定如果我要发送该部分中不同输入字段的值，格式会如何进行。

这是一个编码示例。

$(document).ready(function() {
    $('#login_form').bootstrapValidator({
        fields: {
            username: {
                message: 'Invalid',
                validators: {
                    remote: {
                        message: 'Invalid',
                        url: '/path/to/backend/',
                        data: {
                            password: // What do I put here?
                        }
                    }
                }
            },
            password: {
                message: 'Invalid',
                validators: {
                    remote: {
                        message: 'Invalid',
                        url: '/path/to/backend/',
                        data: {
                            username: // What do I put here?
                        }
                    }
                }
            }
        }
    });
});

该编码示例是解决我的问题并将两个输入字段值提交到后端的一种方法。如果有人用这种方法解决我的问题，或者我可以将所有输入字段值提供给后端的其他方法，请告诉我。

提前感谢您提供的任何帮助。

【问题讨论】：

标签： javascript jquery twitter-bootstrap jqbootstrapvalidation

【解决方案1】：

要将表单中的任何输入字段发送到后端，只需调用一个验证器函数，该函数会调用表单中输入字段的值并将它们分配给具有描述性名称的参数。然后可以从 /path/to/backend 中的 POST（或从 GET 我这样配置它）访问此参数。

您可以在下面看到您的代码已修改。我希望它对你有用。这是经过全面测试的代码。

请发送反馈。

$(document).ready(function() {
$('#login_form').bootstrapValidator({
    fields: {
        username: {
            message: 'Invalid',
            validators: {
                remote: {
                    url: '/path/to/backend/',
                    data: function(validator) {
                       return {
                           password: $('[name="passwordNameAttributeInYourForm"]').val(),
                           whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                       };
                    },
                   message: 'Invalid'
                }
            }
        },
        password: {
            message: 'Invalid',
            validators: {
                remote: {
                    url: '/path/to/backend/',
                    data: function(validator) {
                       return {
                           username: $('[name="usernameNameAttributeInYourForm"]').val(),
                           whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                       };
                    },
                   message: 'Invalid'
                }
            }
        }
    }
});

});

【讨论】：

【解决方案2】：

要使用引导验证器将数据发送到后端，请使用此代码。

$(document).ready(function() {
          $('#student_view').bootstrapValidator({
              // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
              container: 'tooltip',
              feedbackIcons: {
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                  coursename: {
                      validators: {
                          notEmpty: {
                              message: 'Please select course name'
                          },
                          remote: {
                            url: 'abc.php', //path to backend
                            data: function(validator) {
                               return {
                                   course: $('#course').val(), //sending dynamic data value
                                   password: $('#password').val()
                               };
                            },
                           message: 'Invalid'
                        }
                      }
                  },


                 }
              })
              .on('success.form.bv', function(e) {
                      $('#student_view').data('bootstrapValidator').resetForm();

                  // Prevent form submission
                  e.preventDefault();

                  // Get the form instance
                  var $form = $(e.target);

                  // Get the BootstrapValidator instance
                  var bv = $form.data('bootstrapValidator');

                  // Use Ajax to submit form data
                  $.post($form.attr('action'), $form.serialize(), function(result) {
                      console.log(result);
                  }, 'json');
              });
      });

后端必须以以下格式返回输出

{ "valid": true } or { "valid": false }

【讨论】：