• 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 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,250 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,250 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,455 zapytań

141,263 odpowiedzi

319,099 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!

...