Функция Onclick не работает с проверкой CFINPUT

Question

Я пытаюсь проверить поля с помощью CFINPUT, а затем вызывает функцию всплывающего окна, чтобы сделать больше вещей ДО отправки формы, но она не работает. Функция onclick, кажется, имеет прецедент над проверкой CFINPUT. Как только я нажимаю кнопку "Отправить", сначала вызывается функция всплывающего окна без проверки полей. Мне это нужно для:

1. сначала проверьте поля
2. вызвать всплывающую функцию
3. затем отправьте форму после того, как всплывающее окно закроется

(PS Я вижу другой подобный случай здесь, но ответа не дано)

Код выглядит так:

    <cfform action="register.cfm" method="post">
        <cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
        <cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
         <input type="submit" value=" Send " onclick="popup()">
....

Пожалуйста помоги. Спасибо.

Answer 1

Это старая запись в блоге, поэтому вы не знаете, насколько точны сегодня, но она показывает, как вы можете запустить проверку CFFORM через функцию _CF_checkTaskForm(). Так что, похоже, если вы измените отправку формы на кнопку с помощью <input type="button" value="Send" onclick="popup(this.form)" /> затем измените всплывающую функцию, чтобы сначала проверить форму с помощью _CF_checkTaskForm() и, если это пройдет, перейти к другому JS, который вы делаете.

http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/

Чтобы расширить это, я просто посмотрел на установки CF8 и CF11 и похоже, что функция в них - _CF_checkCFForm_1, если при использовании этой версии CF то что-то вроде этого должно привести вас в правильном направлении:

<script>
    popup = function(formreference) {
        var check = _CF_checkCFForm_1(formreference);

      if (!check) {
            //if the rules failed then do not submit the form
           return false;
      } else { 
            // Do the popup
      }
    }
</script>

<cfform action="register.cfm" method="post">
        <cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
        <cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
         <input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>

Answer 2

Проверка cfinput, которую вы пытаетесь выполнить, на стороне клиента эквивалентна

<cfif len(trim(string)) gt 0>

(Изменить: Это не означает, что вы должны полностью зависеть от проверки на стороне клиента. Проверка на стороне клиента - это больше функция, помогающая вашим посетителям. Проверка на стороне сервера по-прежнему важна.)

То, что я должен сказать, действительно слабая проверка. Все, состоящее как минимум из 1 непробельного символа, пройдет тест. Люди смогут иметь такие имена пользователей, как "!" что не фанатично, но это просто некоторая информация.

На предоставленной вами ссылке jQuery Validate они показывают пример формы (вместе со ссылкой той же формы в действии)

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

Этот очень простой пример показывает, насколько простой может быть установлен Validate, и простой формат

<input name="ele" type="text" required>

точно такой же уровень проверки, который вы пытаетесь. Итак, для начала, вы можете почти скопировать и вставить код. (Помимо различных требований, которые вы можете сделать, установка minlength требует определенного количества символов и требует, чтобы хотя бы один из них не был пробелом).

jQuery Validate может быть довольно обширным, но его очень легко установить, и, как только вы познакомитесь, создайте пользовательские классы по мере необходимости.

В заключение, не пренебрегайте пренебрежением к элементам CFForm. Может показаться, что другие игнорируют ваш вопрос, но это не так.

Честно говоря, они начали внедряться в другое время в жизни интернета, но с ними всегда было немного привередливо работать. Расширение их, по мнению многих, не было сделано хорошо и часто раздражало недостатки.

Это супер привлекательно, чтобы иметь возможность сказать, <cfinput...required> но теги становятся неприятностью, и вы не можете легко контролировать их так, как вам хотелось бы. Они костыль, и при этом ржавый костыль.

Вы можете проверить CFUI The Right Way @ Github или эту размещенную версию для некоторого отличного понимания и примеров.