powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проверка формы перед отправкой
18 сообщений из 18, страница 1 из 1
проверка формы перед отправкой
    #37963353
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
всем привет

в целях изучения DOM, сделал скрипт проверки/блокировки/разрешения отправки формы
если не заполнены необходимые поля - выводится предупреждение у соответствующего поля, а кнопке присваивается тип button
если все ок, то кнопка становится submit и происходит отправка
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<form method="post" action="" name="form1" id="form1">
  <input type="text" name="text" id="text" value="" size="55">
  <br>
  <input type="text" name="emptytext" id="emptytext" value="" size="55">
  <br>
  <textarea name="tarea" id="tarea" cols="77" rows="5"></textarea>
  <br>
  <input onclick="checkAndSend(this)" type="submit" name="button" id="button" value="отправить">    
</form>
  
<script> 
  
function checkAndSend(theButton){
  var but = theButton;
  var form = but.parentNode;
  var cou = 0;
  for ( var i = 0; i < form.elements.length;i++ ) {
    if ( form.elements[i].type != 'submit' && form.elements[i].type != 'button') {
      if ( form.elements[i].value.length != 0 ) { 
        // подсчитываем пустые поля
        cou++;
      }
    }
  }
  if( cou != 3 ){
    for ( var i = 0; i < form.elements.length;i++ ) {
      if ( form.elements[i].type != 'submit' && form.elements[i].type != 'button') {
        if ( form.elements[i].value.length == 0 ) {
          // создали новый элемент
          var newSpanElem = document.createElement('span');
          // задали значение нового элемента
          newSpanElem.innerHTML = "поле не должно быть пустым";
          // задали стилевое оформление нового элемента
          newSpanElem.style.cssText = "padding-left:10px; color:red;";
          // добавили новый элемент после нужного тега если там нет тега с предупреждением
          if (form.elements[i].nextElementSibling.innerHTML.length == 0) {
            form.insertBefore(newSpanElem, form.elements[i+1].previousElementSibling);
          } 
        } else {
          // если предупреждающие теги span есть удаляем их
          if ( form.elements[i].nextElementSibling.nodeName == 'SPAN' ) {
            form.removeChild(form.elements[i].nextElementSibling);
          }          
        }
      }
    }
    // если есть незаполненные поля, то присваиваем кнопке тип button
    but.type = 'button';
  }else{
    // иначе делаем кнопку типом submit и отправляем форму
    but.type = 'submit';    
  }
}

</script>


p.s. разумеется в реальной жизни эффективнее и эффектнее использование готовых плагинов типа jQuery Validate и т.д.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963513
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
/me думает: это, типо, "Я пиарюсь" или почеркайте красным?
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963530
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ладно хоть не татьянычу отправил.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963640
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Softпочеркайте красным?вдруг не жалко что-нибудь подсказать по коду :)
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963655
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
buyboyEx_Softпочеркайте красным?вдруг не жалко что-нибудь подсказать по коду :)
По коду - забей.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963664
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
buyboyесли не заполнены необходимые поля ... кнопке присваивается тип button если все ок, то кнопка становится submit
Начните тогда с этого
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963763
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeПо коду - забей. с кодом все так плохо?
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963828
Фотография Hett
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: sql
1.
2.
3.
4.
5.
6.
         // создали новый элемент
          var newSpanElem = document.createElement('span');
          // задали значение нового элемента
          newSpanElem.innerHTML = "поле не должно быть пустым";
          // задали стилевое оформление нового элемента
          newSpanElem.style.cssText = "padding-left:10px; color:red;";


просто убивают такие комменты.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963918
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Hettпросто убивают такие комменты.
неправильно написал или они абсолютно нубовские?
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37963930
Фотография Hett
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Какой смысл писать их, они только читабельность портят.
Когда учился в универе, таким образом комментировали строчки студенты которые совсем ни бум бум в программировании. А так преподаватель спросит - и ответить можно :) В общем да, нубские.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37964087
спан
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
хм...
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37964416
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
HettВ общем да, нубские.ну так я и есть - нуб :(
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37964424
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
спанхм...
суперр...
завидую стилю кодирования - мой на фоне этого капец какой нубский
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37964502
спан
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37964618
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
спан,
крутые ссылки - спасибо = учту на будущее
мне пока вот это надо осилить = http://learn.javascript.ru/
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37968138
buyboy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
спан,
действительно достойная книга = Стоян Стефанов JavaScript. Шаблоны
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37968325
Edd.Dragon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
buyboyShSergeПо коду - забей. с кодом все так плохо?
Нет, с подходом совсем хреново.
Разрешать или отменять сабмит надо в onsubmit формы, а кнопку трогать не надо.
...
Рейтинг: 0 / 0
проверка формы перед отправкой
    #37968328
Edd.Dragon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
И это лишь классический подход, который следует понимать только для отметки "да, я понял как фурычат формы" или для более-менее быстрого создания технического GUI, не заботящегося о юзабилити. А иначе мы уже попривыкли видеть зеленые галки и тултипы при onchange полей ввода с фоновыми ajax-запросами к серверу типа "анука глянь, это имя не занято?", а не после ввода всех полей и нажатия кнопки.
...
Рейтинг: 0 / 0
18 сообщений из 18, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проверка формы перед отправкой
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]