Forum PHP.pl > [JavaScript]jak wywołac dymek 'pole jest wymagane'

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]jak wywołac dymek 'pole jest wymagane'

kayman

25.02.2015, 14:12:45

[HTML] pobierz, plaintext 
<form>
                        <label>Podaj swoje imię:</label>
                        <input style="padding: 3px; border-radius: 5px; " type="text" size="40" id="uName" required/>
                        <button onclick="anyaction()" type="button" id ="action" style="background-color: #336633; color: #fff; border-radius: 5px; padding: 7px">Dalej</button>
</form>
[HTML] pobierz, plaintext

Kod

chodzi mi o standardowy dymek jaki wyświetlają przeglądarki przy walidacji w czasie submit()

z góry dzięki za odpowiedz

DraGo110

25.02.2015, 15:31:10

Nie potrzebujesz tam kolego żadnego Javascripta

wystarczy że dodasz w inputcie atrybut

required

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

kayman

25.02.2015, 15:53:35

przy <button type="button"> nie wystarczy

DraGo110

25.02.2015, 16:00:15

To zmień przycisk na <input type="submit"> i problem z głowy

Jeśli to ci nie wystarczy polecam JQUERY UI - toollip

http://jqueryui.com/tooltip/

Prosty i fajny przyklad jak wykorzystać

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
[HTML] pobierz, plaintext

kayman

25.02.2015, 16:52:15

własnie z powodu że nie chce submit zadałem to pytanie

jquery tez nie chce, only pure js

Forti

25.02.2015, 16:54:36

onclick button dodaj sobie jakąś klase i przywysyłaniu forma sprawdzaj czy ów submit tą klasę ma.

Chyba, że całī ten button robi coś dużego, to sprawdzaj czy faktycznie to zrobił.

DraGo110

25.02.2015, 16:54:54

No to użyj JQuery UI i odnieś się jak zrobiłeś to wcześniej Onclickiem do funkcji "tooltip" i na to samo wyjdzie

kayman

25.02.2015, 17:02:37

@DraGo110 zrozum, na stronie może nie być jquery a kod ma działać

ja wiem ze jquery jest fajne ale nie 100% stron ma z nich korzysta

DraGo110

25.02.2015, 17:06:40

Wg mnie robisz se pod górke ale spoko. No to tak jak napisał kolega wyżej przypisz se jakąś klase w css'ie bo z tego co się doczytałem na necie formularz z dołaczonym Buttonem nie obsluguje Reuired. ale tak czy siak będziesz musiał użyć JSa.

kayman

25.02.2015, 18:08:09

Cytat

Wg mnie robisz se pod górke ale spoko.

ale nie ma inaczej

Cytat

przypisz se jakąś klase w css'ie

jedyny css jaki mogę użyć to element style w tagu -> a tworzeniem tych tagów zajmie się js

dlatego chciałem się dowiedzieć jak się dostać do tego standardowego dymka z poziomu js takiego jak tu-> http://www.w3schools.com/tags/tryit.asp?fi..._input_required jak się nie wypełni pola

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.