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

Object Storage Arubacloud
+1 głos
369 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 (602,380 p.)
Jeśli masz problem z innym kodem, załóż nowy wątek.
komentarz 18 listopada 2021 przez VBService Ekspert (254,490 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 (254,490 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ź 178 wizyt
pytanie zadane 23 września 2019 w C# przez tomek2323 Bywalec (2,050 p.)
0 głosów
3 odpowiedzi 1,372 wizyt
pytanie zadane 8 lutego 2018 w JavaScript przez lukasz21 Obywatel (1,090 p.)
0 głosów
1 odpowiedź 976 wizyt
pytanie zadane 16 maja 2016 w PHP przez Dariusz Piechota Użytkownik (730 p.)

92,654 zapytań

141,543 odpowiedzi

319,953 komentarzy

62,022 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...