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

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.

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

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

if (val < min) ?

#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č?

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.

#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č?

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];

#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 

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.

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