[jQuery] Walidacja formularza dla progressboksa |
[jQuery] Walidacja formularza dla progressboksa |
30.08.2021, 11:01:17
Post
#1
|
|
Grupa: Zarejestrowani Postów: 524 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
|
|
|
30.08.2021, 18:41:07
Post
#2
|
|
Grupa: Zarejestrowani Postów: 515 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%) |
|
|
|
31.08.2021, 08:01:22
Post
#3
|
|
Grupa: Zarejestrowani Postów: 524 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
|
|
|
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; }) |
|
|
13.09.2021, 09:57:19
Post
#5
|
|
Grupa: Zarejestrowani Postów: 524 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
|
|
|
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; }) |
|
|
21.09.2021, 12:28:06
Post
#7
|
|
Grupa: Zarejestrowani Postów: 6 762 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Tak na 100%:
-------------------- |
|
|
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
|
|
|
Wersja Lo-Fi | Aktualny czas: 13.05.2024 - 11:03 |