Форма на ajax

@nepster · Регистрация: 19.09.2009

Студворк — интернет-сервис помощи студентам

JavaScript
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script type="text/javascript">
 
 
function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 5) {
        fieldset.className = "welldone";
    }
    else {
        fieldset.className = "";
    }
}
 
 
 
 
 
 
 
function checkPassword(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length < 8) {
        fieldset.className = "kindagood";
    } else if (txt.length > 7) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}
 
 
function checkEmail(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}
 
 
 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
 
 
function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
addLoadEvent(prepareInputsForHints);
 
</script>

HTML5
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
<style type="text/css">
form {
    width:500px;
    border:1px solid #ccc;
}
fieldset {
    border:0;
    padding:10px;
    margin:10px;
    position:relative;
}
label {
    display:block;
    font:normal 12px/17px verdana;
}
input {width:160px;}
 
 
span.hint {
    font:normal 11px/14px verdana;
    background:#eee url(bg-span-hint-gray.gif) no-repeat top left;
    color:#444;
    border:1px solid #888;
    padding:5px 5px 5px 40px;
    width:250px;
    position:absolute;
    margin: -12px 0 0 14px;
    display:none;
}
 
 
fieldset.welldone span.hint {
    background:#9fd680 url(bg-span-hint-welldone.jpg) no-repeat top left;
    border-color:#749e5c;
    color:#000;
}
fieldset.kindagood span.hint {
    background:#ffffcc url(bg-span-hint-kindagood.jpg) no-repeat top left;
    border-color:#cc9933;
}
 
 
fieldset.welldone {
    background:transparent url(bg-fieldset-welldone.gif) no-repeat 194px 19px;
}
fieldset.kindagood {
    background:transparent url(bg-fieldset-kindagood.gif) no-repeat 194px 19px;
}
 
 
</style>

HTML5
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
<form action="test.php" name="basicform" id="basicform" >
 
 
<fieldset>
    <label for="username">Введите логин:</label>
    <input type="text" id="username" onkeyup="checkUsernameForLength(this);" />
    <span class="hint">Имя пользователя должно быть не менее 6 символов.</span>
</fieldset>
 
 
 
 
<fieldset>
    <label for="password">Введите пароль:</label>
    <input type="password" id="password" onkeyup="checkPassword(this);" />
    <span class="hint">Пароль может содержать любое сочетание символов, и должен быть не менее 4 символов. Рекомендованно  8 символов!</span>
</fieldset>
 
 
 
 
<fieldset>
    <label for="email">Введите ваш email адрес:</label>
    <input type="text" id="email" onkeyup="checkEmail(this);" />
    <span class="hint">Введите свой настоящий email адрес!<br/><br/></span>
</fieldset>
 
 
 
<fieldset>
  <input type="submit" value="Отправить"> 
</fieldset>
 
</form>

Подскажите пожалуйста как сделать, что бы

HTML5
1
2
3
<fieldset>
  <input type="submit" value="Отправить"> 
</fieldset>

появлялось только в том случае, если логин ввден верно (6 и больше символов)
пароль 4 и больше символов
и email введен верно

@chezz · 20.12.2009, 23:11

очень классная форма.
По теме.. Кажись это с помощью jQuery делается..

@nepster · 20.12.2009, 23:20 **[ТС]**

форма стремная какаето, но она уже проверяет после нажатия кнопки...

И все же как заставить кнопку появиться когда все верно?

@chezz · 21.12.2009, 00:12

Там стили 5 мин подправить)

@nepster · 21.12.2009, 11:26 **[ТС]**

я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =(

@chezz · 21.12.2009, 14:43

Сообщение от nepster

я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =(

В CSS это невозможно. Вы просто говорите что та форма стремная..
По теме..
jQuery этим занимается..масса примеров есть в интернете.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@chezz zzloй гений! 28 / 28 / 2 Регистрация: 13.09.2009 Сообщений: 218
	20.12.2009, 23:11
	очень классная форма. По теме.. Кажись это с помощью jQuery делается.. 1

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	20.12.2009, 23:20 [ТС]
	форма стремная какаето, но она уже проверяет после нажатия кнопки... И все же как заставить кнопку появиться когда все верно? 0

@chezz zzloй гений! 28 / 28 / 2 Регистрация: 13.09.2009 Сообщений: 218
	21.12.2009, 00:12
	Там стили 5 мин подправить) 0

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	21.12.2009, 11:26 [ТС]
	я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =( 0