Как сделать так, чтобы что-то не происходило при нажатии кнопки «Отправить»?

0

Я создаю форму, которая должна делать две вещи:

  1. Если введено электронное письмо, отправьте данные с помощью скрытого iframe в Mailchimp, затем откройте модальный код, который включен в код.

  2. Если в форме есть неправильное значение или нет значения, тогда предполагается, что в поле должно появиться сообщение типа "Пожалуйста, введите свой адрес электронной почты" или "Недействительный адрес электронной почты".

Проблемы с этим:

  • Представление формы работает, но модальные показы, даже если форма не подтверждается, и нажата кнопка "отправить".

Я использую http://jqueryvalidation.org/ плагин, так что, где мой JS основан на.

HTML:

<form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">

        <!-- edit form styles: rounded corners, seperation between field and label -->
        <div class="row" id="form">
          <div class="small-11 medium-8 large-7 small-centered columns">
            <div class="row collapse">
              <div class="form-field columns">
                <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
                <input type="hidden" name="id" value="3674d50bfa">
                <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
              </div>
              <div class="form-button columns">
                <input class="button postfix md-trigger" onclick="validate()" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
                <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
              </div>
            </div>
          </div>
        </div>
      </form>
      <IFRAME style="display:none" name="hidden-form"></IFRAME>  
      <div class="row" id="sub-text">
        <div class="small-10 medium-10 small-centered columns end">
          <h2 id="welcome-2">
            JULY TWENTY-FOURTH
          </h2>
        </div>
      </div>
    </div>

JS:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        email: {
            required: true,
            email: true,
            minlength: 5
        },
    });
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});
  • 1
    просто то, что я заметил. не уверен, если это опечатка или нет. но вы, кажется, используете #myform в своем коде js, но в html это #myform1
Теги:
forms

5 ответов

1
Лучший ответ

Ваш код в примере неверен. Я немного исправил это, и теперь он работает так, как вы хотите:

Удалено onclick в html

<form action="localhost" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">
    <!-- edit form styles: rounded corners, seperation between field and label -->
    <div class="row" id="form">
      <div class="small-11 medium-8 large-7 small-centered columns">
        <div class="row collapse">
          <div class="form-field columns">
            <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
            <input type="hidden" name="id" value="3674d50bfa">
            <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
          </div>
          <div class="form-button columns">
            <input class="button postfix md-trigger" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
            <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
          </div>
        </div>
      </div>
    </div>
  </form>
  <IFRAME style="display:none" name="hidden-form"></IFRAME>  
  <div class="row" id="sub-text">
    <div class="small-10 medium-10 small-centered columns end">
      <h2 id="welcome-2">
        JULY TWENTY-FOURTH
      </h2>
    </div>
  </div>
</div>

Добавлено сообщение и правильный идентификатор формы в JS:

$(document).ready(function () {
    $('#myform1').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 5
            },
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        },
        messages:{ email: "please eneter valid email"}
    });
});
Поделиться
  • 0
    Вау, я был так близко Я полагаю, отладка поздней ночью доходит до вас. Спасибо! Как бы я включил это так, чтобы это вызвало модальное, когда это работает?
  • 0
    Да, это было близко). На самом деле это была утренняя отладка. Я предполагаю, что оповещение в этом примере эмулирует модальное. Так что я думаю, что вы должны заменить call to alert функцией или объектом, который покажет вам модал. Или, если вы хотите показать модальные и отправить форму без перезагрузки страницы, вам следует рассмотреть возможность использования AJAX для отправки данных. Надеюсь, что это имеет смысл.
1

HTML5 может проверить поле электронной почты для вас

<form>
    <input type="email" id="emailform" placeholder="Enter your email">
    <input type="submit" value="Submit">
</form>

Когда пользователь отправляет сообщение, появляется сообщение об ошибке.

Также, если вы хотите сделать это через js. Просто получите значение входного элемента и верните false.

if ($('#emailform').val() == ""){
return false;
})
Поделиться
  • 0
    Этот HTML5-код на самом деле не самопроверка.
0

Ну, внимательно посмотрите свой код здесь:

... }); // You are closing the validation method and submitHandler is not part of any object config?
    submitHandler: function (form) { ...
Поделиться
0

Если submitHandler обрабатывает ваше представление формы, а аргумент формы - это объект события, вам просто нужно сделать:

form.stopPropagation();

Karl..

Поделиться
0

событие onclick делает его одной кнопкой, а не кнопкой отправки, и когда форма проверяется в javascript, отправьте ее примерно так:

document.forms["form"].submit();
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню