Vlastní validator – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Vlastní validator – JavaScript, AJAX, jQuery – Fórum – Programujte.comVlastní validator – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Toto vlákno bylo označeno za vyřešené.
jAkErCZ0
Stálý člen
28. 11. 2019   #1
-
0
-

Zdravím,

potřeboval bych udělat vlastní validatot již z toho co mám.


function validateForm() {
    let $tabs = $('.tab');
    let $currentTabInputs = $($tabs[currentTab].getElementsByTagName("input"));
    let i = 0;
    let valid = true;
    $currentTabInputs.each(function (e) {
        let $currentTabInput = $($currentTabInputs[e])
        console.log($currentTabInput);
        if ($currentTabInput.val() === "") {
            $currentTabInput.addClass('invalid');
            valid = false;
        }
    })
    valid ? $($('.step')[currentTab]).addClass('finish') : false;
    return valid;
}

Potřebuji aby uměl validovat hodnotu min a max a díky tomu vypsat 
data-msg-min a data-msg-max

viz
 

$('#productwindow').click(function(){
    $('#width').attr('min','300').attr('data-msg-min','Šířka musí být min 300mm').attr('max','3500').attr('data-msg-max','Šířka musí být max 3500mm').attr('placeholder', "Šířka(Min 300mm, Max 3500mm)");
    $('#height').attr('min','300').attr('data-msg-min','Výška musí být min 300mm').attr('max','3000').attr('data-msg-max','Výška musí být max 3000mm').attr('placeholder', "Výška(Min 300mm,Max 3000mm)");
});

Potom možno validaci select a nevalidovat type file.

Používám toto https://mdbootstrap.com/snippets/jquery/pjoter-2-0/796355 kde to má vlastní validaci a proto bych ji chtěl upravit na to co jsem psal výše.

Rád bych si to udělal sám ale bohužel javascript není moje silná stránka a proto mě napadlo se zeptat o pomoc tady.

Díky všem za rady a pomoc.

Nahlásit jako SPAM
IP: 109.183.230.–
gna
~ Anonymní uživatel
1017 příspěvků
28. 11. 2019   #2
-
0
-

Ten if kde se testuje, jestli je hodnota prázdná, asi vidíš, ne? Tak tam ošéfuj ty svoje atributy.

Nahlásit jako SPAM
IP: 213.211.51.–
jAkErCZ0
Stálý člen
28. 11. 2019   #3
-
0
-

#2 gna
No ale jak? jak udělám ten max a min?

Nahlásit jako SPAM
IP: 77.48.47.–
gna
~ Anonymní uživatel
1017 příspěvků
28. 11. 2019   #4
-
+1
-
Zajímavé

if (val < min) ?

Nahlásit jako SPAM
IP: 213.211.51.–
jAkErCZ0
Stálý člen
3. 12. 2019   #5
-
0
-

#4 gna

Teď sem narazil na problém že když použiji  tohle:

function validateForm() {
    let $tabs = $('.tab');
    let $currentTabInputs = $($tabs[currentTab].getElementsByTagName("input"));
    let i = 0;
    let valid = true;
    $currentTabInputs.each(function (e) {
        let $currentTabInput = $($currentTabInputs[e])

        var inpObj = document.getElementById("width");
        console.log(inpObj);
        if (!inpObj.checkValidity() || $currentTabInput.val() === "") {
            $currentTabInput.addClass('invalid');
            document.getElementById("geeks")
                .innerHTML = inpObj.validationMessage;
            valid = false;
        }else {
            document.getElementById("geeks")
                .innerHTML = "Validováno";
        }
    })
    valid ? $($('.step')[currentTab]).addClass('finish') : false;
    return valid;
}

Což podle informací by mě mělo fungovat na min a max tak nemohu projít přes 1 step.

A přistom tu funkci checkValidity mám přímo směřovaný na input a i tak mě to nechce pustit dál.

Proč?

Nahlásit jako SPAM
IP: 109.183.230.–
gna
~ Anonymní uživatel
1017 příspěvků
3. 12. 2019   #6
-
+1
-
Zajímavé

Ta funkce zvaliduje aktuální tab a podle toho dovolí nebo nedovolí přechod na další.

Ty teď natvrdo vždycky validuješ ten element "width", který předpokládám, že máš až někde na dalších tabech a zatím nevyplněný, takže s nedovolenou hodnou a nepustí tě to dál.

Validuj jen currentTabInput.

Nahlásit jako SPAM
IP: 213.211.51.–
jAkErCZ0
Stálý člen
4. 12. 2019   #7
-
0
-

#6 gna

Okej tomu rozumím takže podle toho co píšeš mám použít něco takového

var inpObj = $currentTabInput.getElementById("width");

jenže na to mi console háže:

functions.js:66 Uncaught TypeError: $currentTabInput.getElementById is not a function
    at HTMLInputElement.<anonymous> (functions.js:66)
    at Function.each (jquery.js:2)
    at r.fn.init.each (jquery.js:2)
    at validateForm (functions.js:63)
    at nextPrev (functions.js:42)
    at HTMLButtonElement.onclick ((index):535)

Chápu že nezná tu funkci getElementId(); ale proč?

Nahlásit jako SPAM
IP: 109.183.230.–
gna
~ Anonymní uživatel
1017 příspěvků
4. 12. 2019   #8
-
+1
-
Zajímavé

Ale ne, $currentTabInput už je ten jeden input, který budeš validovat. 

// vsechny inputy na aktivnim tabu
let $currentTabInputs = $($tabs[currentTab].getElementsByTagName("input"));
// a postupne kazdy z nich zvalidovat
$currentTabInputs.each(function (e) {
	// tohle je ten input k validaci
	let $currentTabInput = $($currentTabInputs[e])
	...
}

Ten getElementById tam nedává žádný smysl. A $currentTabInput je ten input jako jQuery objekt, ze kterého můžeš dostat ten "nativní" objekt. Tak jak to máš teď, by tohle mělo fungovat.

let $currentTabInput = $($currentTabInputs[e])
let inpObj = $currentTabInput[0];
Nahlásit jako SPAM
IP: 213.211.51.–
jAkErCZ0
Stálý člen
4. 12. 2019   #9
-
0
-

#8 gna

Super tohle už pomohlo ale ještě bych měl jeden dotaz jak způsobit aby pod každým tím inputem se vypsal jeho error jelikož teď se mi errory vypisují pod jeden input což může někoho dost zmátnout...

 <div class="col">
                                                                <!-- Material input -->
                                                                <div class="md-form form-sm wrap-input100 rs1-wrap-input100 validate-input">
                                                                    <input n:name="width" id="width" class="form-control" placeholder="Šířka" type="number" min="100" data-msg-min="Šířka musí být nad 100mm"  required>
                                                                    <span id="valid_msg"></span>
                                                                </div>
                                                            </div>
                                                            <!-- Grid column -->

                                                            <!-- Grid column -->
                                                            <div class="col">
                                                                <!-- Material input -->
                                                                <div class="md-form form-sm wrap-input100 rs1-wrap-input100 validate-input">
                                                                    <input n:name="height"  id="height" class="form-control" placeholder="Výška" type="number" min="100" data-msg-min="Výška musí být nad 100mm" required>
                                                                    <span id="valid_msg"></span>
                                                                </div>
                                                            </div>

A tady v js mám 

 document.getElementById("valid_msg")
                .innerHTML = inpObj.validationMessage;

Což způsobuje že to vypisuje jen pod jeden input ... zkoušel sem že by to vyřešila možná funkce getElementByClassName(); ale bohužel ne.

Díky 

Nahlásit jako SPAM
IP: 109.183.230.–
gna
~ Anonymní uživatel
1017 příspěvků
4. 12. 2019   #10
-
+1
-
Zajímavé

getElementByClassName najde element, který má požadovanou hodnotu v atributu class. Šlo by to tak nějak udělat, ale nedává to smysl.

Když takhle máš ten span vždycky hned za inputem, tak by šlo úplně jednoduše to prostě šoupnout do následujícího elementu:

$currentTabInput.next().html(inpObj.validationMessage);

Samozřejmě by to chtělo tak nějak ať nezáleží na tom kde a jestli vůbec tam ten element je, ale upřímně já v tomhle nejsem úplně kovanej.

Nahlásit jako SPAM
IP: 213.211.51.–
jAkErCZ0
Stálý člen
5. 12. 2019   #11
-
0
-

#10 gna
Díky moc tohle pomohlo a ty si pomohl mě :)

Nahlásit jako SPAM
IP: 109.183.230.–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 17 hostů

Podobná vlákna

Chyba ve validator — založil Dave-CZ

Vlastní komponenta v C# — založil beginner

Vlastní výjimka — založil dawnMist

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý