Walidacja adresu email :: 4programmers.net

0

Hej.

Mam takie pytanko: jak zrobić aby przycisk "Dalej" był 'nieaktywny' do momenu zanim użytkownik nie poda poprawnego emaila?
Bo teraz jest tak, że jak użytkownik kliknie przycisk 'Dalej' to wyskoczy na chwile komunikat o błędzie ale nie będzie on miał żadnego wpływu i forma przejdzie na kolejną.

Oczekuje tego, że użytkownik poda email i jeżeli będzie on poprawny to przekieruje go na kolejną stronę, a jeżeli nie to każe mu go poprawić (z podpowiedzi)

<input type="email" name="txtEmail" placeholder="Adres e-mail" required>

<input type="submit" name="next" class="next action-button" value="Dalej" />

oraz

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

Pozdrawiam

1

Podpiąć do onChange, inputa z emailem funkcję walidującą w stylu:
https://www.w3resource.com/javascript/form/email-validation.php
jeśli walidacja przebiegnie poprawnie, aktywować przycisk "dalej" (np. dodając klasę jak w twoich paskach postępu).

0

Dziękuje za odpowiedź.
Coś tam wykombinowałem i wygląda to tak:

     <input type="email" id="email" name="email" onchange="check();" />
  <input type="button" id="test" name="next" class="next action-button" value="Dalej"/>


    function check() {
        var email_x = document.getElementById("email").value;
        filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (filter.test(email.value)) {
             document.getElementById('test').removeAttribute('disabled');
            return true;
        } else {
            document.getElementById('test').setAttribute('disabled', 'disabled');
            return false;
        }
    }

Ale chyba nie do końca mi o to chodziło.
Teraz to działa tak, że przycisk jest niekatywny w momencie, gdy użytkownik nic nie wpisze, lub wpiszę błędnego emaila, a mi chodzi o to, aby po kliknieciu w przycisk wyskakiwał ten standardowy komunikat gdy się stosuje "email" i pokazywał, że adres email jest do poprawki

Chodzi mi o taki zwykły podstawowy schemat jak np:

<html>
<body>

  <input type="text" name="name" required>
    <input type="email" name="email" required>
  <input type="submit" value="Submit">

</body>
</html>

Czyli: Jeżeli jest puste pole to po kliknięciu przycisku wyskakuje standardowy komunikat wypełnij pole, jeżeli źle wpiszemy maila i wciśniemy submit: wyskoczy czego brakuje

I takiego coś potrzebuje, ale w moim formularzu :)

Pozdrawiam

2

Ale chyba nie do końca mi o to chodziło.

Tak napisałeś, tak dostałeś:

jak zrobić aby przycisk "Dalej" był 'nieaktywny' do momenu zanim użytkownik nie poda poprawnego emaila?

Czyli: Jeżeli jest puste pole to po kliknięciu przycisku wyskakuje standardowy komunikat wypełnij pole, jeżeli źle wpiszemy maila i wciśniemy submit: wyskoczy czego brakuje
I takiego coś potrzebuje, ale w moim formularzu :)

No to tak jest przecież "w standardzie", co ci tu nie działa?


<!DOCTYPE html>
<html>
<head></head>
<body>

<form action="#"> 
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>
  
</body>
</html>

0

filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

Tak w ogóle to wystrzegaj się tego typu walidacji, bo wykluczasz poprawne adresy e-mail. Jak już koniecznie chcesz walidować cokolwiek z adresami e-mail, rób tzw. miękką walidację. Napisz użytkownikowi, że skrpyt wykrył, że coś może być w adresie nie tak i poproś by sprawdził czy nie ma literówki, nim ponownie wyśle formularz. Jednak pozwól mu wpisać adres jaki chce.

0

Jest sporo gotowych skryptów do walidacji, jak dla mnie szkoda czasu na roztrząsanie tego.

1

Owneds napisał(a):

do momenu zanim użytkownik nie poda poprawnego emaila?

Co dla Ciebie jest poprawnym mailem? Standard RFC 5322? Wiesz, że Abc\@[email protected] to poprawny adres? Tak samo "swiety mikolaj"@laponia.pl

0

Freja Draco napisał(a):

No to tak jest przecież "w standardzie", co ci tu nie działa?


<!DOCTYPE html>
<html>
<head></head>
<body>

<form action="#"> 
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>
  
</body>
</html>

Dobrze. To zacznijmy od początku.

Są cztery formularze:

 <ul id="progressbar">
    <li class="active">Krok pierwszy</li>
    <li>Krok drugi</li>
    <li>Krok trzeci</li>
    <li>Krok czwarty</li>
  </ul>

**Pierwszy: **
Przywitanie z przyciskiem Rozumiem:

<fieldset>
    <h2 class="fs-title">Krok pierwszy</h2>
    <h3 class="fs-subtitle">Przywitanie</h3>
    <input type="button" name="next" class="next action-button" value="Rozumiem" />
  </fieldset>

Drugi

<fieldset>
    <h2 class="fs-title">Krok drugi</h2>
    <h3 class="fs-subtitle">Weryfikacja email</h3>      
  <input type="email" name="email" required>
        <input type="button" name="previous" class="previous action-button" value="Cofnij" />
        <input type="button" name="next" class="ostatni action-buttons" value="Dalej" />
</fieldset>

Trzeci

<fieldset>
    <h2 class="fs-title">Krok trzeci</h2>
    <h3 class="fs-subtitle">Podaj imię i nazwisko</h3>

  <input type="email" name="imie">
  <input type="email" name="nazwisko">
        <input type="button" name="previous" class="previous action-button" value="Cofnij" />
        <input type="button" name="next" class="ostatni action-buttons" value="Dalej" />
  </fieldset>

Czwarty

<fieldset>
   <h2 class="fs-title">Krok czwarty</h2>
   <h3 class="fs-subtitle">Dziękujemy za podanie danych!</h3>
 </fieldset>

I tak wygląda cały formularz dotyczący danych.
Kod pozawalajacy przejść na następną stronę wygląda tak:

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

A na poprzednią tak:

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

Opis ogólny:
Pierwszy formularz, trzeci oraz czwarty działają okej.
Problem jest z formularzem drugim ponieważ chciałbym aby działał on tak:
Jeżeli pole email jest puste, lub zawarty w nim email jest niepoprawny (np brakuje @) to nie pozwól przejść do formularza trzeciego tylko wyświetl te podpowiedzi.

Bo teraz to działa tak, że jeżeli nie wpiszę nic i klikne dalej to normalnie przejdę do kroku trzeciego, gdzie podczas zmieniania się z formy drugiej na trzecią wyskakuje "wypełnij to pole" ale w niczym ono nie przeszkadza i można kontynuować wypełnianie formularza.
Zaś jeśli wpiszę poprawnego e-maila to przekierowuje mnie do kroku pierwszego, zamiast do trzeciego.

Pozdrawiam

0

A czy jesteś w stanie wrzucić działającą wersję na http://jsfiddle.net? Wtedy będzie nam łatwiej rozmawiać o tym, co jest obecnie oraz co chcesz osiągnąć.

0

Witam serdecznie.
Kod jest ogólnie dostępny na: https://codepen.io/atakan/pen/gqbIz

W tym przypadku chodzi wtedy o krok pierwszy:
Password jest mi zbyteczny, chodzi tylko o kwestię email:

Jeżeli email jest pusty, lub ma nie poprawną formę to nie pozwól kliknąć next (przejście do kroku drugiego) tylko wyświetl podpowiedź (taką, jaka jest w przypadku użycia: <input type="email" )

Troche pokombinowałem i 'stworzyłem' taki kod. Generalnie wszystko działa, tylko jest to kopia "$(".next").click(function(){ "
Czy mogę zamiast wklejać to samo dwa razy jakoś odwołać się w "$("#subscribe-button").on("click", function(e) { " do tego wcześniej już stworzonego next?

    <input class="email-form__input" id="email-input" type="email" placeholder="[email protected]">
        <input id="subscribe-button" class="email-form__button" type="button" value="Dalej">

oraz

$("#email-input").on("change", function() {
  emailInput = $(this).val();

  if (validateEmail(emailInput)) {
    $(this).css({
      color: "white",
      background: "green",
      border: "1px solid green"
    });
  } else {
    $(this).css({
      color: "red",
      border: "1px solid red"
    });

 alert("Zły adres email!");
  }
});

$("#subscribe-button").on("click", function(e) {
  if (validateEmail(emailInput)) {
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
  } else {
    alert('Musisz podać email!');
    return false;
  }
});

function validateEmail(email) {
  var pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

  return $.trim(email).match(pattern) ? true : false;
}

Walidacja adresu email

Owneds napisał(a):

Freja Draco napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami