• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Walidacja formularza & jQuery

Object Storage Arubacloud
0 głosów
1,477 wizyt
pytanie zadane 18 października 2018 w JavaScript przez drraco Początkujący (370 p.)
zamknięte 19 października 2018 przez drraco

Witam !
Na początku chcę tylko uprzedzić że jestem początkujący;-)
Mam prosty formularz z którego danych nie chcę przesyłać do jakieś bazy danych czy też na konto pocztowe . Dane z formularza chcę jedynie wyświetlić obok niego - co już zrobiłem za pomocą jQuery. Jedyne co chciałbym zrobić jeszcze to dodać walidacje do formularza. Wcześniej gdy dodałem framework jQuery Validation Plugin - to walidacja wymuszała poprawność wpisanych danych, ale gdy kliknąłem na button, to nie poprawione dane zostały wysyłane przez Jquery na miejsce obok.Szukam rozwiązania aby   było możliwe przesłanie danych z formularza na miejsce obok, dopiero gdy dane zostaną poprawione w formularzu. Dodam że w pliku scripts.js zablokowałem domyślne działanie przeglądarki (czyli wysyłanie formularza) za pomocą event.preventDefault(); - w celu wyświetlenia danych z formularza obok formularza za pomocą jQuery. Pytanie nr. 2: czy jest możliwe formatowanie (powiększenie ) strzałek (góra, dół) w inpucie typu number ? Będę wdzięczny za wskazówki jak tego dokonać oraz o ile to możliwe chciałbym uniknąć walidacji w PHP.

index.html

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>Kawiarnia</title>
        <link rel="stylesheet" href="style/style.css">
        <script src="jquery.js"></script>
        <script src="scripts.js"></script>

    </head>
    <body>

        <section class="reservation">
            <div class="container">
                <h2 class="center-text"></h2>
                <h5 class="center-text"></h5>
                <div class="col-half">
                    <form action="">
                        <label for="name">
                            <strong>Imię i nazwisko</strong>
                        </label><br>
                        <input type="text" name="name" id="name"><br>
                        <label for="email">
                            <strong>Email</strong>
                        </label><br>
                        <input type="text" name="email" id="email"><br>
                        <label for="persons">
                            <strong>Ilośc osób</strong>
                        </label><br>
                            <input type="number" name="persons" value="" min="1" max="10" id="persons"><br>
                        <button type="submit" class="button button-dark" id="login">Rezerwuj</button>
                    </form>
                </div>
                <div class="col-half" id="reservation-right">
                    <h4>Znajdź nas</h4>
                    <img src="img/mapa.jpg" alt="Mapa">
                </div>
            </div>          
        </section>  
    </body>
</html>

sesions.js

$(document).ready(function(){
    $("#login").click(function(event){
        event.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        var persons = $("#persons").val();
        $("#reservation-right").html(name + "<br>" + email + "<br>" + persons);
    });
});

 

komentarz zamknięcia: Otrzymałem rozwiązanie
3
komentarz 18 października 2018 przez adrian17 Ekspert (346,900 p.)

Będę wdzięczny za wskazówki jak tego dokonać oraz o ile to możliwe chciałbym uniknąć walidacji w PHP.

Jeśli dane z formularza będą trafiały na serwer, nie można tego uniknąć - jeśli ktoś np nie ma JSa, ma rozszerzenie/wirusa grzebiącego w zapytaniach/stronie lub wyśle gołe zapytanie HTTP, i tak będziesz musiał sprawdzić czy zapytanie jest poprawne.

Serwer nie powinien ufać klientowi. Walidacja powinna być przede wszystkim po stronie serwera - walidacja po stronie klienta to tylko dodatek poprawiający UX.

Tymczasem... mógłbyś pokazać cały kod? Jak za dużo na tą stronę, to mógłbyś wrzucić na gista/githuba/etc?

komentarz 18 października 2018 przez drraco Początkujący (370 p.)
edycja 19 października 2018 przez drraco
Serwis który tworzę ma być tylko do portfolio i ma być tylko do wglądu i prezentacji, dlatego nie zamierzałem wysłać danych na jakikolwiek serwer. Czy w przypadku takiego zastosowania serwisu (czyli tylko do prezentacji), muszę pisać walidacje wykorzystującą połączenie z serwerem ? Aplikacja stoi na serwerze node.js w usłudze heroku :
https://cracow.herokuapp.com/
Kod na githubie:
https://github.com/domi/Cafe
1
komentarz 18 października 2018 przez adrian17 Ekspert (346,900 p.)
("chciałbym uniknąć walidacji w PHP" zabrzmiało, jakbyś miał backend PHPowy.)

Jakiej walidacji Ci brakuje? Widzę że np pole "email" masz typu "text"; gdybyś dał type="email", miałbyś np walidację emaila za darmo w desktopowych przeglądarkach.
komentarz 18 października 2018 przez drraco Początkujący (370 p.)
Zgadza się masz rację :-) - ale jak wspomniałem wcześniej wyłączyłem domyślne akcje przeglądarki za pomocą  event.preventDefault() np.dla przycisku domyślna akcja to wysłanie formularza, dla odnośnika domyślna akcja to przekierowanie do wskazanego adresu. I przez to zwykła walidacja nie działa. Musiałem wyłączyć domyślne akcje, ponieważ dane z formularza mają trafić do skryptu jQuerry, który wyświetla je dynamicznie po prawej stornie formularza. (w przeciwnym razie formularz został by wysłany - strona by się przeładowała) Ja jedynie co chcę jeszcze dodać, to aby wyświetlenie danych mogło nastąpić tylko po poprawnym wypełnieniu formularza - np. poprawianie wypełnionym polu e-mail.
Zapytam może inaczej :-)  : czy jest możliwa blokada buttona dopóki formularz nie jest do końca  poprawnie wypełniony ?
1
komentarz 18 października 2018 przez adrian17 Ekspert (346,900 p.)

czy jest możliwa blokada buttona dopóki formularz nie jest do końca  poprawnie wypełniony ?

Jasne. Możesz przechwycić każdy event zmiany inputa, możesz przechwycić submit, możesz przechwycić kliknięcie na button.

event.preventDefault() np.dla przycisku domyślna akcja to wysłanie formularza, dla odnośnika domyślna akcja to przekierowanie do wskazanego adresu. I przez to zwykła walidacja nie działa.

To proste - zamiast odpalania handlera na `click` (które odpala się przed walidacją), zrób handler na `submit` (który jest po walidacji).

Prosty przykład z działającą walidacją przeglądarki: https://jsfiddle.net/jq4d7gox/

komentarz 19 października 2018 przez drraco Początkujący (370 p.)
Zmiana na 'submit' - była czymś czego szukałem. Oznaczyłbym twój komentarz jako rozwiązanie problemu, ale można oznaczyć tylko odpowiedzi, a nie komentarze. Wielkie dzięki za pomoc ;-) Pozdrawiam !
1
komentarz 19 października 2018 przez adrian17 Ekspert (346,900 p.)
(Dodałem odpowiedź dla formalności)

2 odpowiedzi

+1 głos
odpowiedź 19 października 2018 przez adrian17 Ekspert (346,900 p.)
wybrane 19 października 2018 przez drraco
 
Najlepsza
Kopia z komentarzy:

Żeby mieć ficzery walidacji przeglądarki i wciąż mieć własne zachowanie zamiast "submita", trzeba zrobić event handler na "submit", zamiast na "click". https://jsfiddle.net/jq4d7gox/
komentarz 19 października 2018 przez drraco Początkujący (370 p.)
Dzięki, o to mi chodziło ;-)
+1 głos
odpowiedź 18 października 2018 przez AdamSiekierski Dyskutant (8,340 p.)
edycja 18 października 2018 przez AdamSiekierski

Ja stworzyłem taki kod:

function validateForm() {
	var imie = $('#imie').val()
	var nazwisko = $('#nazwisko').val()
	var mail = $('#mail').val()
	var telefon = $('#telefon').val()
	var wiadomosc = $('#wiadomosc').val()
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/
	var errors = true

	if (imie.length < 3 && !(imie === '')) {
		$('#name-label').text('Wpisz swoje imię')
		$('#name-label').addClass('second-clr') // Klasa second-clr powoduje że opis danej rubryki - #(nazwaRubryki)-label staje się czerwony 
	} else if (!(imie === '')) {
		$('#name-label').text('Imię')
		$('#name-label').removeClass('second-clr')
		errors = false
	}

	if (nazwisko.length < 2 && !(nazwisko === '')) {
		$('#surname-label').text('Wpisz swoje nazwisko')
		$('#surname-label').addClass('second-clr')
	} else if (!(nazwisko === '')) {
		$('#surname-label').text('Nazwisko')
		$('#surname-label').removeClass('second-clr')
		errors = false
	}

	if (!emailReg.test(mail)) {
		$('#mail-label').text('Zły adres e-mail')
		$('#mail-label').addClass('second-clr')
	} else if (!(mail === '')) {
		$('#mail-label').text('Mail kontaktowy')
		$('#mail-label').removeClass('second-clr')
		errors = false
	}

	if (telefon.length < 9 || telefon.length > 15) {
		if (!(telefon === "")) {
			$('#phone-label').text('Zły numer telefonu')
			$('#phone-label').addClass('second-clr')
		}
	} else if (!(telefon === '')) {
		$('#phone-label').text('Numer telefonu')
		$('#phone-label').removeClass('second-clr')
		errors = false
	}

	if (wiadomosc.length < 5 && !(wiadomosc === '')) {
		$('#message-label').text('Napisz krótki opis')
		$('#message-label').addClass('second-clr')
	} else if (!(wiadomosc === '')) {
		$('#message-label').text('Wiadomość')
		$('#message-label').removeClass('second-clr')
		errors = false
	}

	return errors;
}

function wyslij() {
	var areErrors = validateForm()

	if (areErrors == true) {
		return 0;
	} else if (areErrors == false) {
		$('form').attr('action', 'mail.php')
		$('#submit').click()
	}
}

// No i jeszcze jeden comment
// Pod formularzem znajdują się dwa przyciski - 
// Niewidzialny submit oraz button z onclick="wyslij()"
// Gdy funlkcja wyslij() stwierdzi że nie ma błędów wirtualnie naciska Submita

Może coś pomoże, a może nie pomoże

Pzdr

 

PS HTML jest taki:

Formularz kontaktowy
<form method="post">
	<span class="form-label" id="name-label">Imię</span><input type="text" name="imie" id="imie" onkeyup="validateForm()"><br>
	<span class="form-label" id="surname-label">Nazwisko</span><input type="text" name="nazwisko" id="nazwisko" onkeyup="validateForm()"><br>
	<span class="form-label" id="mail-label">Mail kontaktowy </span><input type="text" name="mail" id="mail" onkeyup="validateForm()"><br>
	<span class="form-label" id="phone-label">Numer telefonu </span><input type="text" name="telefon" id="telefon" onkeyup="validateForm()"><br>
	<span class="form-label" id="message-label">Wiadomość </span><textarea name="wiadomosc" id="wiadomosc" onkeyup="validateForm()"></textarea><br>
	<div class="clear"></div><button onclick="wyslij()">Wyślij </button>
	<input type="submit" value="Wyślij" id='submit' style="display: none">
</form>
<style>
  .second-clr {
    color: red;
  }
</style>
komentarz 19 października 2018 przez drraco Początkujący (370 p.)
Bardzo fajnie zrobiony formularz, jednak na szczęście, konieczna była tylko mała korekta z 'click' na 'submit'. Ale dziękuje bardzo za podesłanie dodatkowej opcji. Pozdrawiam ;-)

Podobne pytania

0 głosów
1 odpowiedź 273 wizyt
pytanie zadane 6 października 2018 w JavaScript przez Sobol3k Użytkownik (690 p.)
0 głosów
0 odpowiedzi 260 wizyt
pytanie zadane 8 maja 2018 w JavaScript przez XDdomino Użytkownik (680 p.)
0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 17 kwietnia 2018 w JavaScript przez Catalonya1992 Mądrala (5,440 p.)

92,761 zapytań

141,685 odpowiedzi

320,485 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...