Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery] Walidacja formularza dla progressboksa
Malinaa
post 30.08.2021, 11:01:17
Post #1





Grupa: Zarejestrowani
Postów: 517
Pomógł: 6
Dołączył: 21.07.2008

Ostrzeżenie: (0%)
-----


Witam,
napisałem taki kod:

Kod
<script>
            $("#btnSubmit").click(function() {
                var fields = false;
                var name = $('#contact_form_name').val(); // input type=text
                var email = $('#contact_form_email').val(); // input type=email
                var theme = $('#contact_form_theme').val(); // input type=text
                var message = $('#contact_form_message').val(); // type textarea
                var policy = $('#contact_form_policy').is(':checked'); // input type=checkbox
                // INFO: Dla formularza id="formContact" wspolny dla wszystkich pol jes atrybut required="required".

                if (!name || !email || !theme || !message || !policy) { fields = true; }

                if ((!fields) && ($('#fieldProgress').val() != '')) {
                    setTimeout(function () {
                        var newprogress = 100;
                        $('#progressBox').removeClass('hidden');
                        $('#progressBar').width(newprogress + "%").attr('aria-valuenow', newprogress);
                    }, 1000);
                }
            });
        </script>


Przed wykonaniem if ((!fields) && ($('#fieldProgress').val() != '')) należy sprawdzić,
czy wszystkie powyższe o różnych typach pola z tylko jednym wspólnym atrybutem dla wszystkich required="required" zostały wypełnione.

Jak uprościć kod, pozbyć się tylu var'ów?
Tak, aby było super PRO, bo obecnie po prostu działa, a chciałbym lepiej.

Ten post edytował Malinaa 30.08.2021, 11:03:42


--------------------
I welcome you on the Internet >>> Design by Malina
Go to the top of the page
+Quote Post
gitbejbe
post 30.08.2021, 18:41:07
Post #2





Grupa: Zarejestrowani
Postów: 515
Pomógł: 63
Dołączył: 27.08.2012

Ostrzeżenie: (0%)
-----


Cytat
Go to the top of the page
+Quote Post
Malinaa
post 31.08.2021, 08:01:22
Post #3





Grupa: Zarejestrowani
Postów: 517
Pomógł: 6
Dołączył: 21.07.2008

Ostrzeżenie: (0%)
-----


Dzięki, ale nie znalazłem odpowiedzi w 10 minut, a gdybym miał więcej czasu nie pytał bym, a doszedł do rozwiązania.
Jeśli ktoś już doszedł, będę wdzięczny za kilka linii kodu.


--------------------
I welcome you on the Internet >>> Design by Malina
Go to the top of the page
+Quote Post
Pyton_000
post 31.08.2021, 09:14:06
Post #4





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


A może po prostu coś takiego?

Cytat
<form>
<input type="text" required name="test1"/>
<input type="text" required name="test2"/>
<button id="sent">
Send
</button>
</form>

document.querySelector("#sent").addEventListener('click', (event) => {
if(event.target.form.checkValidity()) {
alert('Form is ok');
return;
} else {
alert("Form is NOT ok")
}
event.preventDefault;
})
Go to the top of the page
+Quote Post
Malinaa
post 13.09.2021, 09:57:19
Post #5





Grupa: Zarejestrowani
Postów: 517
Pomógł: 6
Dołączył: 21.07.2008

Ostrzeżenie: (0%)
-----


Mam tak:

Kod
document.querySelector("#btnSubmit").addEventListener('click', (event) => {
  if (event.target.form.checkValidity() && ($('#fieldProgress').val() != '')) {
   setTimeout(function () {
     var newprogress = 100;
     $('#progressBox').removeClass('hidden');
     $('#progressBar').width(newprogress + "%").attr('aria-valuenow', newprogress);
   }, 1000);
  }
  event.preventDefault;
})


zdaje się, że jest Super.
Thnx


--------------------
I welcome you on the Internet >>> Design by Malina
Go to the top of the page
+Quote Post
Pyton_000
post 21.09.2021, 10:23:52
Post #6





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


To może pozbądź się całkiem jQ

Kod
document.querySelector("#btnSubmit").addEventListener('click', (event) => {
  if (event.target.form.checkValidity() && ($('#fieldProgress').val() != '')) {
   setTimeout(function () {
     const newprogress = 100;
     let progessBar = document.querySelector("#progressBox");

     progessBar.classList.remove('hidden');
     progessBar.setAttribute('width', newprogress + "%");
     progessBar.setAttribute('aria-valuenow', newprogress);
   }, 1000);
  }
  event.preventDefault;
})
Go to the top of the page
+Quote Post
trueblue
post 21.09.2021, 12:28:06
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tak na 100%:

  1. if (event.target.form.checkValidity() && (document.querySelector('#fieldProgress').value != '')) {
  2. .
  3. .
  4. .
  5. event.preventDefault();



--------------------
Go to the top of the page
+Quote Post
Pyton_000
post 23.09.2021, 18:21:59
Post #8





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


True. Umnknął mi ten kawałek
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 16:48