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

Problem ze skryptem JS , validacja formularza.

VPS Starter Arubacloud
+1 głos
312 wizyt
pytanie zadane 9 listopada 2021 w JavaScript przez DLFDL Początkujący (270 p.)

Witam,

mam problem ze skryptem, który napisałem, kod powinien validowac zawartość formularza, jednak działa on tylko w niektórych polach za to we wszystkich pojawia sie validacja HTML. Mam podobny problem w dwóch formularzach na stronie chociaż zrobiłem je inaczej. Będę wdzięczny za rade.

//order form
function validateForm() {

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var quantity = document.getElementById("quantity").value;
    var promo = document.getElementById("promo").value;


    if (username === null || username === "") {
        swal("Please enter your Username.");
        return false;
    }
    else if (password === null || password === "") {
        swal("Please enter your Password.");
        return false;
    }
    else if (password.length < 11) {
        swal("Password must be 11 characters long.");
        return false;
    }
    else if (isNaN(quantity)) {
        swal("Quantity must be in numbers.");
        return false;
    }
    else if (promo === null || promo === "") {
        swal("Remember about your discount :)");
        return false;
    }

    swal("THANK YOU FOR YOUR ORDER!");

    return true;
}



//contact form
function validateForm() {

  var name = document.forms["nextForm"]["name"].value;
  var email = document.forms["nextForm"]["email"].value;

  if(name === null || name === "") {
    swal("Please enter your name.");
    name.focus();
    return false;
  }
  else if (email === null ||email === "") {
    swal("Please enter a valid e-mail address.");
    email.focus();
    return false;

  } else {


    return true;
  }
}
  //order form
<form name="myForm" method="post" action="MAILTO:x21133824@xxxx.xx" onsubmit="return validateForm()">
        <input type="text" name="username" placeholder="Username" id="username" required>
        <input type="password" name="password" placeholder="Password" size="" maxlength="11" id="password" required>
        <input type="number" name="quantity" placeholder="Quantity" min="1" max="100" id="quantity" required>
        <input type="text" name="Promo Code" placeholder="Promo Code" value="" id="promo">

//contact form
  <form name="nextForm" method="post" action="MAILTO:x21133824@xxxx.xx" onsubmit="return validateForm()">
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>

 

1 odpowiedź

+2 głosów
odpowiedź 9 listopada 2021 przez qax Dyskutant (8,060 p.)

Jeśli robisz walidację w HTML, to nie musisz robić drugi raz tego samego w JS. Jeśli jednak chcesz to zrobić, możesz wspomóc się metodą event.preventDefault(), która zatrzymuje domyślne zachowanie formularza w trakcie wysyłania. Poza tym radziłbym użyć obserwatora zdarzeń jak form1.addEventListener('submit', validateForm1); zamiast atrybutu w HTML onsubmit="return validateForm()". No i użyłeś dla obu formularzy dwóch funkcji o takich samych nazwach, więc obojętnie który wyślesz, to wykonają się obie funkcje. Moja propozycja kodu (w razie uwag lub pytań pisać śmiało smiley):

<form id="myForm" name="myForm" method="post" action="MAILTO:x21133824@xxxx.xx">
<input type="text" name="username" placeholder="Username" id="username" >
<input type="password" name="password" placeholder="Password" size="" maxlength="11" id="password">
<input type="number" name="quantity" placeholder="Quantity" min="1" max="100" id="quantity">
<input type="text" name="Promo Code" placeholder="Promo Code" value="" id="promo">
<input type="submit" />
</form>
<br /><br />
<form id="nextForm" name="nextForm" method="post" action="MAILTO:x21133824@xxxx.xx">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="submit" />
</form>
var form1 = document.getElementById("myForm");
var form2 = document.getElementById("nextForm");

form1.addEventListener('submit', validateForm1);
form2.addEventListener('submit', validateForm2);

//order form
function validateForm1(event) {

	var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var quantity = document.getElementById("quantity").value;
  var promo = document.getElementById("promo").value;
  
  if (username === null || username === "") {
  	alert("Please enter your Username.");
  	event.preventDefault();
    return;
  } else if (password === null || password === "") {
  	alert("Please enter your Password.");
    event.preventDefault();
    return;
  } else if (password.length < 11) {
  	alert("Password must be 11 characters long.");
    event.preventDefault();
    return;
  } else if (isNaN(quantity)) {
  	alert("Quantity must be in numbers.");
    event.preventDefault();
    return;
  } else if (promo === null || promo === "") {
  	alert("Remember about your discount :)");
    event.preventDefault();
    return;
  }
  
  alert("THANK YOU FOR YOUR ORDER!");
  
}

//contact form
function validateForm2(event) {

	var name = document.forms.nextForm.name;
  var email = document.forms.nextForm.email;
  var nameVal = name.value;
  var emailVal = email.value;
  
  if (nameVal === null || nameVal === "") {
  	alert("Please enter your name.");
    name.focus();
    event.preventDefault();
    return;
  } else if (emailVal === null || emailVal === "") {
  	alert("Please enter a valid e-mail address.");
    email.focus();
    event.preventDefault();
    return;
  }
  
  alert("FORM OK");
  
}

 

komentarz 9 listopada 2021 przez VBService Ekspert (251,210 p.)
edycja 9 listopada 2021 przez VBService

Dodałbym jeszcze sprawdzanie po przez trim() i "użyłbym bardziej" tych zmiennych form1, form2, nie tylko dla "obserwatora zdarzeń"   wink

 

propozycja zmian

<form id="myForm" name="myForm" method="post" action="MAILTO:x21133824@xxxx.xx">
  <input type="text" id="username" name="username" placeholder="User name" />
  <input type="password" id="password" name="password" placeholder="Password" maxlength="11" />
  <input type="number" id="quantity" name="quantity" placeholder="Quantity" min="1" max="100" />
  <input type="text" id="promo_code" name="promo_code" placeholder="Promo Code" />
  <input type="submit" />
</form>
<br /><br />
<form id="nextForm" name="nextForm" method="post" action="MAILTO:x21133824@xxxx.xx">
  <input type="text" id="name" name="name" placeholder="Name" />
  <input type="email" id="email" name="email" placeholder="Email" />
  <input type="submit" />
</form>
var form_order, form_contact;
document.addEventListener('DOMContentLoaded', formsInitialization);

function formsInitialization() {
    form_order = document.getElementById("myForm");
  form_contact = document.getElementById("nextForm");

    form_order.addEventListener('submit', validateFormOrder);
  form_contact.addEventListener('submit', validateFormContact);
}

//order form
function validateFormOrder(event) {
  const   username = form_order.username.value.trim(),
          password = form_order.password.value.trim(),
          quantity = parseInt(form_order.quantity.value),
        promo_code = form_order.promo_code.value.trim();
  let alert_msg = '';

  if (!username)
    alert_msg += "Please enter your Username.\n";

  if (!password)
    alert_msg += "Please enter your Password.\n";

  if (password.length < 11)
    alert_msg += "Password must be 11 characters long.\n";

  if(!quantity)
    alert_msg += "Quantity must be in numbers.\n";

  if (!promo_code)
    alert_msg += "Remember about your discount :)";

  if (alert_msg) {
    alert(alert_msg);
    event.preventDefault();
    return false;
  }

  alert("THANK YOU FOR YOUR ORDER!");
}

//contact form
function validateFormContact(event) {
  const  name = form_contact.name.value.trim(),
        email = form_contact.email.value.trim();
  let alert_msg = '';

  if (!name)
    alert_msg += "Please enter your name.\n";

  if (!email)
    alert_msg += "Please enter a valid e-mail address.\n";

  if (alert_msg) {
    alert(alert_msg);
    event.preventDefault();
    
    for (let input of form_contact) 
      if (!input.value.trim()) { input.focus(); break; }
    
    return false;
  }

  alert("FORM OK");
}

 

 

P.S. How to check if a value is not null and not empty string in JS

1
komentarz 9 listopada 2021 przez Comandeer Guru (599,730 p.)

@qax, 

Jeśli robisz walidację w HTML, to nie musisz robić drugi raz tego samego w JS.

Nie musi, ale powinien, bo walidacja w HTML od zawsze jest niedostępna, a dodatkowo działa tak źle, że równie dobrze mogłaby nie działać. Przydaje się chyba wyłącznie w przypadkach, gdy JS userowi nie zadziała albo gdy go wyłączy.

Osobiście traktuję walidację w HTML jako fajny sposób na deklaratywne opisanie wymagań dla poszczególnych pól, które to następnie wykorzystuję do zbudowania sensownej walidacji po stronie JS.

komentarz 9 listopada 2021 przez qax Dyskutant (8,060 p.)

Racja Panie Tomku ale w przypadku walidacji jaką zrobił przedmówca imho wybrałbym HTML... cheeky

komentarz 9 listopada 2021 przez DLFDL Początkujący (270 p.)

@qax, bardzo dziękuję za odpowiedzi, forma działa bez zarzutu jak ja uruchamiam w przeglądarce, ale niestety już nie po zamieszczeniu zmian na stronie, bo teraz nie działa już wcale, wiec problem musi być gdzieś indziej i niestety nie mam pomysłu gdzie on może się znajdować.

komentarz 9 listopada 2021 przez VBService Ekspert (251,210 p.)

ale niestety już nie po zamieszczeniu zmian na stronie, bo teraz nie działa już wcale, 

możesz proszę podać linka do Twojej strony, może uda się coś ustalić.

komentarz 9 listopada 2021 przez DLFDL Początkujący (270 p.)
jest to moja pierwsza strona i nie mam jej na serwerze, mogę wysłać pliki w folderze zip.
komentarz 9 listopada 2021 przez VBService Ekspert (251,210 p.)

To może umieść sam kod html (cały) strony gdzie jest (są formularze) formularz i javascript na np: codepen lub jsfiddle

komentarz 9 listopada 2021 przez DLFDL Początkujący (270 p.)
edycja 9 listopada 2021 przez DLFDL

https://jsfiddle.net/m94ruqf2/

pierwszy formularz "order"

https://jsfiddle.net/DLFDL2020/hxys84o1/

formularz contact

1
komentarz 9 listopada 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

@qax, ale łatwo zaingerować w kod HTML (JS także) z poziomu devtoolsów przeglądarki. Prawdziwą walidację zrobisz na serwerze, a po stronie usera to faktycznie tylko ułatwienie dla zapominalskich/niedbałych/nie ogarniających itp.

komentarz 18 listopada 2021 przez DLFDL Początkujący (270 p.)

@VBService, witam, czy zaobserwował Pan cos co może przeszkadzać w walidacji?

komentarz 18 listopada 2021 przez VBService Ekspert (251,210 p.)
edycja 18 listopada 2021 przez VBService

Kod jest poprawiony, że to co już jest napisane działa, ale walidacje są niepełne (np. contact - brakuje sprawdzenie czy jest tekst w <textarea>), ale myślę, że sam sobie poradzisz.

Form order:  https://jsfiddle.net/f81kz4sd/

Form contact:  https://jsfiddle.net/4s958gxa/

komentarz 18 listopada 2021 przez DLFDL Początkujący (270 p.)

@VBService, witam, czy zaobserwował Pan cos co może przeszkadzać w walidacji?

Bardzo dziękuje za pomoc, skopiowałem i wkleiłem całość do pliku .js i niestety dalej nie działa. A jeżeli wkleję bezpośrednio do pliku html i usunę "required" to wtedy dopiero działa (jeżeli nie usunę do nie działa). Powinno byc w pliku js ale mysle ze zostawie w html. Bardzo dziekuje :)

Czy moze Pan jeszcze zerknac na ten kalkulator?

https://jsfiddle.net/DLFDL2020/bv7u6jp9/5/

komentarz 18 listopada 2021 przez Comandeer Guru (599,730 p.)
Jeśli masz problem z innym kodem, załóż nowy wątek.
komentarz 18 listopada 2021 przez VBService Ekspert (251,210 p.)

Powinno byc w pliku js

bo jeśli dodajesz skrypt js-a tak

<script type="text/javascript" src="script.js" charset="utf-8"></script>

w sekcji <head> to musisz zmienić te linie

// forms
var form1 = document.getElementById("myForm");
form1.addEventListener('submit', validateForm1);

na np.

window.onload = function() {
  var form1 = document.getElementById("myForm");
  form1.addEventListener('submit', validateForm1);
}

 

Running Your JS Code at the Right Time ]

komentarz 21 listopada 2021 przez DLFDL Początkujący (270 p.)
edycja 21 listopada 2021 przez DLFDL

Bardzo dziękuje za pomoc, teraz już działa, probowałem dodać kolejna funkcje która sprawdzała by poprawność kodu promocyjnego, ale niestety nie działa:

else if (promo.match(/(^|\W)mextexgood($|\W)/i)) {
      swal("Coupon applied! :)")
        .then(() => {
          promo.focus();
        });
      event.preventDefault();
      return false;
  }

a jeżeli dodam funkcje, która znajduje sie ponizej to w kolko wyskakuje komunikat "Coupon applied! :)" i nie mozna wyslac formularza

else if ($("#promo").val() !== '') {
      swal("Coupon applied! :)")
        .then(() => {
          promo.focus();
        });
      event.preventDefault();
      return false;
  }

probowałem zrobić jeszcze cos takiego, ale wtedy nic już nie działa

  window.onload = function(){
  document.getElementById('promo').onchange = function(e){
    var promo = document.getElementById("promo").value;
    if(promo.match(/(^|\W)mextexgood($|\W)/i)) {

         swal('Coupon applied! :)');
  }else {

         swal('Invalid coupon!');
  }
  return false;
  }
  }

 

komentarz 21 listopada 2021 przez VBService Ekspert (251,210 p.)
edycja 21 listopada 2021 przez VBService

Możesz sprawdzić stan pola promo czy zawiera wartość już "sprawdzoną" za pomocą zmiennej tzw. flagi (w tym przypadku typ boolean)

Sprawdź:  https://jsfiddle.net/dwg5vcas/1/

Podobne pytania

0 głosów
1 odpowiedź 171 wizyt
pytanie zadane 23 września 2019 w C# przez tomek2323 Bywalec (2,050 p.)
0 głosów
3 odpowiedzi 1,317 wizyt
pytanie zadane 8 lutego 2018 w JavaScript przez lukasz21 Obywatel (1,090 p.)
0 głosów
1 odpowiedź 946 wizyt
pytanie zadane 16 maja 2016 w PHP przez Dariusz Piechota Użytkownik (730 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...