Как при вводе неправильного e-mail вывести сообщение рядом с полем ввода?

06.05.2013, 15:41. **Показов** 9414. **Ответов** 1

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

Здравствуйте! Я в области web - программирования совсем новичок :( если кто сталкивался с подомным помогите пожалуйста.

Мною написан скрипт на проверку правильности ввода E-mail и пароля. В случай неправильного ввода E-mail выскакивает модальное окно с сообщением "Wrong E-mail". Совсем не могу разобраться как вывести это же сообщение просто рядом с полем ввода e-mail :(

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
<script type="text/javascript">  
    function f_submit() {
        var login = document.getElementById("login");
        var password = document.getElementById("password");
        login.style.backgroundColor = "#FFFFFF";
        password.style.backgroundColor = "#FFFFFF";
        var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;
        var Str = login.value;
        if (!p.test(Str)) {
            window.alert("Wrong E-mail");
            login.style.backgroundColor = "#FFE4E1";
            login.select();
            return false;
            }
        p = /^[a-z0-9_\.\-]{6,16}$/i;
        Str = password.value;
        if (!p.test(Str)) {
            window.alert("Wrong password");
            password.style.backgroundColor = "#FFE4E1";
            password.select();
            return false;
        }
    } 
    
    </script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<form action="" autocomplete="off" method="get" onsubmit="return f_submit();"  >
<h1>Log in</h1>
<p>
    <label for="login" >Your email:</label>
    <input id="login" type="text" name="login" required="required" placeholder="mymail@mail.com" />
</p>
<p>
    <label for="password" >Your password:</label>
    <input id="password" type="password" name="password" required="required" />
</p>
<p>
    <input type="submit" value="Login" />
</p>
</form>
</body>

Буду согласен с вами что подобного рода решение полно в интернете. Но там скрипты слишком заумные :(
Заранее благодарен за помощь!

@Alexdemath · 06.05.2013, 15:54

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

Мною написан скрипт на проверку правильности ввода E-mail и пароля. В случай неправильного ввода E-mail выскакивает модальное окно с сообщением "Wrong E-mail". Совсем не могу разобраться как вывести это же сообщение просто рядом с полем ввода e-mail

Добавьте id="email" в <p> (5-я строка в HTML-коде), в JS-код добавьте переменную p_email = document.getElementById("email")
и замените window.alert("Wrong E-mail") на

JavaScript
1
p_email.innerHTML += "<span style=\"color: red;\">Wrong E-mail</span>"

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .