JQuery пост метод и перенаправление после успеха

Question

Я пытаюсь сделать метод сообщения, используя jquery. Я использую это в форме и с bootstravalidator, чтобы проверить это. После успешной проверки форма публикуется, а php начинает действовать. Сейчас я пытаюсь сделать перенаправление на другую страницу после успешного поста. Вот код:

$('#buy').click(function() {
$.post('php/text.php', $('form#order').serialize(), function () {window.location.href = "index.html";});
});

Я попытался несколько попыток, но не могу получить window.location.href = "index.html"; правильно. Либо форма перенаправляется даже с ошибочной проверкой, либо ничего не происходит вообще....

Я нахожу это странным, потому что 'php/text.php', $('form#order').serialize()' получает только в действии, если проверка правильна...

РЕДАКТИРОВАТЬ:

Я также использую bootstrapvalidator для проверки формы. Проверка работает отлично, и метод post выполняется, если все в порядке.

Bootstrapvalidator:

$(document).ready(function() {
        var validator = $('#order').bootstrapValidator({
            fields: {
                email : {
                    message : "write email adress", 
                    validators : {
                        notEmpty : {
                            message : "Show Email adress"
                        },
                        stringLength : {
                            min : 6,
                            max: 35,
                        }
                    }
                },
            }
        });
      });

EDIT2:

HTML:

<form id="order">
  <input type="text" name="name"/><br>
  <input type="text" name="email"/><br>
  <textarea name="comment"></textarea><br>
  <button type="submit" name="send" id="buy">Send</button>
</form>

Answer 1

Ваша форма отправляется после нажатия на #buy кнопку, и даже если ваш код JavaScript работает, страница обновится. Если вы хотите отключить отправку формы, вы можете использовать $(form).on('submit', function() { return fase; }),

Это обновленный код:

$('#order').on('submit', function() {
    $.post('php/text.php',
          $('form#order').serialize(),
          function () {
              window.location.href = "index.html";
          }
    );
    return false;
});

Обновить

Поскольку вы используете bootstrapvalidator, вы также должны использовать плагин для процесса отправки (плагин имеет submitHandler функция, которую вы должны использовать)

Это обновленный код валидатора:

$(document).ready(function() {
    var validator = $('#order').bootstrapValidator({
        fields: {
            email : {
                message : "write email adress", 
                validators : {
                    notEmpty : {
                    message : "Show Email adress"
                    },
                    stringLength : {
                        min : 6,
                        max: 35,
                    }
                }
            },
        },
        submitHandler: function(validator, form, submitButton) {
            $.post('php/text.php',
                form.serialize(),
                function () {
                    window.location.href = "index.html";
                }
            );
    });
});

Answer 2

Я думаю, вы что-то не так поняли.

Я не уверен, что вы подразумеваете под "бутстрапвалидатором". Сама Bootstrap не обеспечивает проверку, а только визуальную индикацию проверенных в противном случае элементов формы.

Код, который вы написали, не выполняет никакой "проверки".

это $('form#order').serialize() будет сериализовать вашу форму и включать только "успешные" элементы формы (см. https://api.jquery.com/serialize/ и https://www.w3.org/TR/html401/interact/forms.html для определения "успешно"). Все остальные элементы формы будут пропущены, что приведет к пустой строке, если все элементы формы не будут "успешными".

В любом случае, эта строка (безусловно) подается на $.post() метод, поэтому запрос POST всегда будет выполняться. Если запрос POST выполнен успешно (имеется в виду код состояния 2xx или 304), ваш обработчик успеха с перенаправлением будет выполнен.

Таким образом, для достижения вашей цели вы должны выполнить некоторую проверку вашей формы перед отправкой запроса POST. Вы можете сделать это вручную или использовать только плагины jquery или bootstrap, созданные для проверки формы.

Answer 3

Я нашел решение

        $(document).ready(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
              });

        $(#button).click(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
            var isValid = true;
            if($('#order').find('div.has-error').length > 0){
            isValid = false;
            };
            if (isValid == true){
                $.post('php/text.php', $('form#order').serialize());
                $(location).attr('href','success.html');;
            };
          });
       });