Валидация форм

Shift-Web · August 9, 2011

У кого нибудь есть идеи как можно добраться до оформления стандартных тултипов выводимых при валидации форм(valid, invalid и ты ды)? Всё устраивает по сути, но в webkit на вин они какие то убогие и разлетаются за пределы каркаса(или скорее под z-index ложаться). В принципе, в вебките они походу обычным div реализованы, хотя не совсем уверен(трудно поймать скотинку). Буду оч признателен, если кто-то подскажет ...

Спасибо

Edited August 9, 2011 by Shift-Web

SelenIT · August 9, 2011

Оно?

Shift-Web · August 9, 2011

Бью челом )) , то что надо ))))

Softlink · August 9, 2011

Оно?

чего-то после перехода по ссылке ноутбук наглухо лег, только принудительная перезагрузка помогла.

Shift-Web · August 9, 2011

Оно?
чего-то после перехода по ссылке ноутбук наглухо лег, только принудительная перезагрузка помогла.


::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

Интересно мне вот что ... будет ли это унифицировано с другими браузами

Nekromancer · August 9, 2011

Врятли, по крайней мере сразу, веб-ките по сути своей столько фич, только знать надо.

Shift-Web · August 10, 2011

Врятли, по крайней мере сразу, веб-ките по сути своей столько фич, только знать надо.

В общем-то это напрягает, если честно. Хотелось бы всё таки какое-то единобразие

Great Rash · August 10, 2011

Пока эти подсказки нельзя будет стилизовать как хочешь толку от них нет никакого. Все равно придется пилить JS, чтобы угодить заказчику. Предлагаю смириться года на три как минимум...

Shift-Web · August 10, 2011

Пока эти подсказки нельзя будет стилизовать как хочешь толку от них нет никакого. Все равно придется пилить JS, чтобы угодить заказчику. Предлагаю смириться года на три как минимум...

Да это понятно ) Интересно же .. )

SelenIT · August 10, 2011

А нет ли способа кроссбраузерно спрятать их нафихъ, а взамен банально показывать собственные заготовки — например, через input:invalid + span?

Great Rash · August 10, 2011

По крайней мере visibility: hidden; не действует.

Nekromancer · August 10, 2011

<!DOCTYPE html>
<html> 
<head> 
<title></title> 
<meta charset="utf-8">
<style>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
</style>
</head> 
<body> 
<form method="get" action="" style="margin: 50px;">
<input type="text" placeholder="Test" required id="test">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
var test = document.getElementById('test');
test.addEventListener('invalid', function(e){
	e.preventDefault();
	e.stopPropagation();
	alert('Вот так ')
}, false)
</script>
</body> 
</html>

http://afarkas.github.com/webshim/demos/demos/webforms.html

UPD:

http://jsfiddle.net/NekR/K4MR4/

И ещё что то в таком духе ...

http://jsfiddle.net/NekR/K4MR4/3/

Great Rash · August 10, 2011

Тогда уж проже убрать required из атрибутов тега...

Nekromancer · August 10, 2011

Ну а как вы хотите отменять событие через CSS? Всего то надо отменить одно действие по умолчанию, а не писать громоздкий скрипт на проверку всех инпутов.

Great Rash · August 10, 2011

Не, идея была не в том, чтобы отменить событие, а в том, чтобы спрятать оригинальный элемент подсказки и забабахать свой дизайнерский.

Nekromancer · August 10, 2011

Приблизительно так тогда

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
label.error {display: none; font-size: 12px; padding: 2px; margin-left: 10px;}    
input.invalid + label.error {display: inline-block; }
</style>
</head>
<body>
<form method="get" action="" style="margin: 50px;">
<input type="text" placeholder="Test" required id="test"><label class="error">Что то пошло не так ... </label>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
var test = document.getElementById('test');
test.addEventListener('invalid', function(e){
        e.preventDefault();
        this.classList.add('invalid')
}, false);
    test.addEventListener('input', function(e){
        this.classList.remove('invalid');
    }, false);
</script>
</body>
</html>

Shift-Web · August 10, 2011

Nekromancer, ну в принципе да. Как вариант прокатит. Чего-то не хватает

SelenIT · August 10, 2011

Nekromancer, большое спасибо за примеры! Про событие invalid я узнал только из них, на досуге поизучаю этот API!

Nekromancer · August 11, 2011

Рад, что помог.

Shift-Web · September 4, 2011

Досадный баг. Бублы прыгают, если у дочернего контейнера есть паддинг ): Чтобы сфиксить нужно каждый контейнер формы чекать, а они все со своими приколами в зависимости от положения. Накопал патч, но когда его зарелизят не понятно. печалька ...

Sign In

Валидация форм

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information