• 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.

+1 głos
103 wizyt
pytanie zadane 9 listopada 2021 w JavaScript przez DLFDL Nowicjusz (210 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 Mądrala (7,300 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 Nowicjusz (210 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 (562,740 p.)
Jeśli masz problem z innym kodem, załóż nowy wątek.
komentarz 18 listopada 2021 przez VBService VIP (144,910 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 Nowicjusz (210 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 VIP (144,910 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ź 127 wizyt
pytanie zadane 23 września 2019 w C# przez tomek2323 Obywatel (1,970 p.)
0 głosów
3 odpowiedzi 822 wizyt
pytanie zadane 8 lutego 2018 w JavaScript przez lukasz21 Obywatel (1,100 p.)
0 głosów
1 odpowiedź 770 wizyt
pytanie zadane 16 maja 2016 w PHP przez Dariusz Piechota Użytkownik (730 p.)

86,485 zapytań

135,241 odpowiedzi

300,484 komentarzy

57,233 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...