Bootstrap Validator - Send all input field values to remote PHP file

Question

I was wondering if there was a way to send all of my input field values to a remote PHP file using Bootstrap Validator.

To explain, I have two input fields in a log in form. I use Bootstrap Validator's remote validation on both of the input fields. Each validation only sends the requested input field's value and there is no access to the other input field via $_POST in the PHP back end.

I know that I can send data to the PHP back end with the data option, but I am unsure as to how the formatting would go if I were to send the values of different input fields in that section.

Here is a coding example.

$(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?
                        }
                    }
                }
            }
        }
    });
});

That coding example is one way to solve my problem and have both input field values submitted to the back end. If anyone has a solution to my problem with this method, or another way that I can go about giving all input field values to the back end, please let me know.

Thank you in advance for any help that you may give.

Answer 1

For sending any input field in your form to the backend, just call a validator function that recalls the values of the input fields in your form and assign them to a parameter with a descriptive name. This parameter then can be accessed from POST (or from GET i you so configure it) in /path/to/backend.

You can see you code modified below. I hope it will work for you. It's fully tested code.

Please send feedback.

$(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'
                }
            }
        }
    }
});

});

Answer 2

To send data to backend using bootstrap validator use this code.

$(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');
              });
      });

backend must return output in the following format

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