Форма проверки JQuery внутри Bootstrap Modal не будет отправлена ​​после проверки - PullRequest
0 голосов
/ 26 октября 2018

UPDATE: Чтобы рассмотреть вопрос в перспективе, я создал еще одну Fiddle , которая показывает ту же форму за пределами модальной.

Когда он удовлетворяет правильным условиям, т.е. вы набираете адрес электронной почты и нажимаете кнопку «Начать», он правильно отображает страницу PHP, в этом случае он показывает ошибку 404, но выполняет то, что должен делать, ОТПРАВИТЬ!

ОРИГИНАЛЬНАЯ ЗАДАЧА: Теперь вернемся к проблеме: я хотел бы отправить свою форму в модале начальной загрузки, но когда я открываю модальный и набираю электронное письмо, и нажимаю кнопку начала: НИЧЕГО НЕ ПРОИСХОДИТ

php won't submit

Что я делаю не так? Отсутствует ли решение JavaScript для правильной отправки формы или мешают ошибки проверки?

Я новичок в JavaScript, поэтому я не могу найти решение для кодирования, если оно на самом деле основано на js.

Пожалуйста, помогите мне разобраться в этой странной модальной проблеме, спасибо!

Скрипка: https://jsfiddle.net/o5vpt6ck/3/

HTML:

<form id="signup-form" class="cd-signin-modal__form" action="confirm.php" method="post">
                <h3 class="bigsentence black text-center font-weight-bold">Create</h3>
                <p class="cd-signin-modal__fieldset">
                    <label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signup-email">Enter your email address</label>
                    <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border signupfield" id="email" type="email" name="email" placeholder="Enter your email address">
                </p>

                <p class="cd-signin-modal__fieldset">
                    <input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="GET STARTED">
                </p>
            </form>

JS:

$("#signup-form").validate ({

    // validation rules for registration formd
errorClass: "error-class",
validClass: "valid-class",
errorElement: 'div',
errorPlacement: function(error, element) {
    if(element.parent('.input-group').length) {
        error.insertAfter(element.parent());
    } else {
        error.insertAfter(element);
    }
},
onError : function(){
    $('.input-group.error-class').find('.help-block.form-error').each(function() {
      $(this).closest('.form-group').addClass('error-class').append($(this));
    });
},
        rules: {
    email: {email:true, required:true}
  },

    messages: {
        email: {
            required: "Please enter your email address",

        },


            highlight: function(element, errorClass) {
    $(element).removeClass(errorClass);
}    
    }

});

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Я думаю, что настоящая проблема в другом.Я отлаживал загруженный вами код и обнаружил, что в вашем коде JS есть ошибка.

enter image description here

проблема возникает из строки номер 82, входные данныестановится нулевым, поэтому ваш код ломается в функции AddClass.

enter image description here

Дайте мне знать, если это решит вашу проблему.Ура:)

0 голосов
/ 31 октября 2018

В вашем коде отсутствуют две вещи

Добавьте это в форму для проверки регистрации

submitHandler: function(frm) { 
    frm.submit();
}

Затем в регистрационной форме удалить

name="submit"

от

<input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" value="GET STARTED" type="submit">

Вы можете прочитать объяснение здесь javascript submit () не является функцией?

0 голосов
/ 26 октября 2018

У вас есть логика проверки, но вы не говорите ей, что делать, когда форма действительно действительна!

Вам необходимо добавить это к объекту проверки:

submitHandler: function(form) {
    $(form).submit(); // You submit the actual form here
}

https://jqueryvalidation.org/validate/#submithandler

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...