Form validaton alert és ajax nélkül

Form validaton alert és ajax nélkül
2010-05-03T13:45:33+02:00
2010-05-06T17:26:56+02:00
2022-11-17T16:40:36+01:00
marcias
Sziasztok!

Számos javascript validation témát találtam, ami működik is, de nekem egy olyan megoldás kellene, ami nem egy alert boxban írja ki, hogy hibás a kitöltött mező, hanem mellette sima szövegként. Ajaxhoz pedig nem értek, szóval lehetőleg javascripttel kéne megoldani.

Köszönöm!
Mutasd a teljes hozzászólást!
validateUsername függvényt és validateEmail függvényt se felejtds el bemásolni. A hibakonzol mit mond amikor futtatod a kódot?

:off: én nem sokra tartom a JS oldali ellenőrzést, mert az megy át rajta aki nem akar. Utána még szerver oldalon is ellenőrizned kell az inputokat.
Mutasd a teljes hozzászólást!

  • csinálsz az input mellé egy div-et adsz neki egy id-t
    és div.innerHTML='ez itt hibás'

    ajax:
    Simple Ajax Example
    Mutasd a teljes hozzászólást!
  • Az AJAX is JavaScript :)

    ide tettem egy kis példát:
    input mellé üzenet
    Mutasd a teljes hozzászólást!
  • Neked és djjjozsinak is köszönöm, sikerült egy működő kódot összehoznom, legalábbis tesztpadon, ilyen:


    JAVASCRIPT része
    <<<<<<
    function validateFormOnSubmit(theForm) {
    var reason = "";

    reason += validateUsername(theForm.username);
    reason += validateEmail(theForm.email);

    if (reason != "") {
    document.getElementById('err').innerHTML="<b>HIBA: </b>" + reason ;
    return false;
    }

    alert("");
    return false;
    }
    function validateEmpty(fld) {
    var error = "";

    if (fld.value.length == 0) {
    fld.style.background = 'Yellow';
    error = "Egy vagy több szükséges mező nincs kitöltve.\n"
    } else {
    fld.style.background = 'White';
    }
    return error;
    }
    ...
    (és itt jön még pár feltétel aminek teljesülnie kell)
    >>>>>>>

    HTML része:
    <<<<<<
    <?php ......

    <div class='tip' id='tip'>$tip </div>
    <form method='post' onSubmit='return validateFormOnSubmit(this)' action=''>
    <input type='hidden' name='fid' value='1' />
    <div style='float:right'>Az Ön neve:<input class='text' type='text' maxlength='40' name='name' value='' /></div>
    <div style='float:right'>Az Ön email címe:<input class='text' type='text' maxlength='40' name='email' value='' /></div>
    <div style='float:right'><textarea rows='3' cols='50' id='msg' onkeypress='return TextAreaOnKeyPress(this.id);' class='text'></textarea></div>
    <div style='float:right; margin-top:2px; clear:both'><input type='submit' value='' name='Submit' style='background-image:url(img/ok_btn.png); background-color:#bbb; width:82px; height:22px; border:0px;' /></div>
    </form>
    ....?>
    >>>>>>>>>>>

    VISZONT: Most, hogy beillesztettem a js-t az "éles" oldalra, nem működik egyáltalán. Mit ronthattam el? A linkek jók pedig. HTML oldalon cseszhettem el valamit? Az gyanítom nem lehet gond, hogy PHP-ba van ágyazva.
    Egy másik kérdésem, hogyha ez jó lesz, akkor hogyan tudom végrehajtatni a FORM action-jét? Tehát ha teljesül a feltétel, akkor rendesen küldje el a FORM-ot.

    Köszönöm
    Mutasd a teljes hozzászólást!
  • van username name-mel ellátott input meződ?

    a textarea-nak nincs is name tulajdonsága.
    Mutasd a teljes hozzászólást!
  • "name" van a JS-ben is, az át lett írva, csak a tesztkódot másoltam be ide véletlenül.
    A textarea-nak most adtam nevet, habár arra nem adtam meg feltételt.
    Egyébként továbbra sem jó.
    Mutasd a teljes hozzászólást!
  • validateUsername függvényt és validateEmail függvényt se felejtds el bemásolni. A hibakonzol mit mond amikor futtatod a kódot?

    :off: én nem sokra tartom a JS oldali ellenőrzést, mert az megy át rajta aki nem akar. Utána még szerver oldalon is ellenőrizned kell az inputokat.
    Mutasd a teljes hozzászólást!
  • A form akkor lesz submitolva az ellenőrzés után, ha nem false-t ad vissza a validateFormOnSubmit-od.

    Nem neked szántam, csak rossz linkre kattintottam.
    Mutasd a teljes hozzászólást!
  • a hibakonzol nem ír ki valami hibát ?
    Mutasd a teljes hozzászólást!
  • Nem, csak simán nem történik semmi. Ez alatt azt értem, hogy nem ír ki semmit, csak újratölt az oldal változások nélkül. JS hibakonzolt egyébként hogyan lehet előhozni?
    Egyébként nekem elég a JS, korábban php-val írattam ki dolgokat, de arra meg azt mondják, hogy erőforráspazarló. Az ellenőrzést természetesen azzal is megcsinálom.

    Bemásolom a tökéletesen működő tesztverziót is, hátha segít:
    <html>
    <head>
    <script type="text/javascript">
    function validateFormOnSubmit(theForm) {
    var reason = "";

    reason += validateUsername(theForm.username);
    reason += validateEmail(theForm.email);

    if (reason != "") {
    document.getElementById('err').innerHTML="<b>HIBA: </b>" + reason ;
    return false;
    }

    alert("");
    return false;
    }
    function validateEmpty(fld) {
    var error = "";

    if (fld.value.length == 0) {
    fld.style.background = 'Yellow';
    error = "Egy vagy több szükséges mező nincs kitöltve.\n"
    } else {
    fld.style.background = 'White';
    }
    return error;
    }
    function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores

    if (fld.value == "") {
    fld.style.background = 'Yellow';
    error = "Nem adott meg nevet.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
    fld.style.background = 'Yellow';
    error = "A név nem megfelelő hosszúságú.\n";
    } else if (illegalChars.test(fld.value)) {
    fld.style.background = 'Yellow';
    error = "A név nem megfelelő karaktert tartalmaz.\n";
    } else {
    fld.style.background = 'White';
    }
    return error;
    }
    function trim(s)
    {
    return s.replace(/^\s+|\s+$/, '');
    }
    function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value); // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (fld.value == "") {
    fld.style.background = 'Yellow';
    error = "Nem adott meg e-mail cĂ­met.\n";
    } else if (!emailFilter.test(tfld)) { //test email for illegal characters
    fld.style.background = 'Yellow';
    error = "KĂŠrem, adjon meg hiteles e-mail cĂ­met!\n";
    } else if (fld.value.match(illegalChars)) {
    fld.style.background = 'Yellow';
    error = "Az e-mail cím nem megfelelő karaktert tartalmaz.\n";
    } else {
    fld.style.background = 'White';
    }
    return error;
    }
    </script>
    </head>
    <body>
    <div id="err"></div>
    <form name="demo" onSubmit="return validateFormOnSubmit(this)" action="">
    <table summary="Demonstration form">
    <tbody>
    <tr>
    <td><label for="username">Your user name:</label></td>
    <td><input name="username" size="35" maxlength="50" type="text"></td>
    </tr>
    <td><label for="email">Your email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"></td>
    </tr>
    <tr>
    <td>Â </td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>Â </td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>
    Mutasd a teljes hozzászólást!
  • de arra meg azt mondják, hogy erőforráspazarló.

    ne higyj nekik :)

    CTRL-SHIFT-J a firefoxban. De akűr használhatsz firebug-ot is.
    Mutasd a teljes hozzászólást!
  • a kérdés inkább az, hogy ez miért nem megy éles környezetben? Mert ez jónak tűnik.

    A függvény visszatérésével lesz gond szerintem. Ha hiba van benne false, ha nincs hiba true-val kéne.

    function validateFormOnSubmit(theForm) { var reason = ""; reason += validateUsername(theForm.username); reason += validateEmail(theForm.email); if (reason != "") { document.getElementById('err').innerHTML="<b>HIBA: </b>" + reason ; return false; } alert(""); return true; }

    plusz az űrlapba még kéne szerintem egy method="post"
    Mutasd a teljes hozzászólást!
  • Megnéztem firefoxban. Azt írja: fld is undefinied, egyébként én is ezt néztem, de az a "jó" kódban sincsen külön definiálva, szóval nem igazán értem.
    A "false"-t pedig "true"-ra állítottam, de természetesen nem történt változás.

    MOD: elképzelhető lenne, hogy a FORM-ban található másik JS kóddal akad össze? (Az csak a textarea max karaktereinek számát határozza meg, szóval csodálkoznék)
    Mutasd a teljes hozzászólást!
  • Na, még kb egy óra után sikerült megoldani. A legszebb, hogy nem igazán tudom, mi nem volt jó. Ettől függetlenül elfogadom a korábbi megoldást, valószínűleg az egyéni kódom volt valahol elrontva.
    Köszönöm a segítséget!
    Mutasd a teljes hozzászólást!
  • :off: én nem sokra tartom a JS oldali ellenőrzést, mert az megy át rajta aki nem akar. Utána még szerver oldalon is ellenőrizned kell az inputokat.


    Én sem. Szerveroldalon úgyis ott az ellenőrzés, az kap még egy paramétert, hogy ez most nem valódi dolog, hanem csak ellenőrzés és ajaxszal oldom meg. Pl. regisztrációknál ez számomra nagyon bevált.
    Mutasd a teljes hozzászólást!
  • off-ra:

    Azért jó a js azaz kliens oldali ellenőrzés, mert a júzerek 90%-ának eszébe sem jut átmenni rajta, sőt, feltételezem, hogy 80% azt sem tudja hogyan tudja megtenni. Ugyanakkor egy email cím elgépelése, egy nem megengedett karakter begépelése az űrlapon, az kiszűrhető js-el.
    Lássuk be, hogy nem mindegy, hogy a js-el terheled a kliens gépét, vagy a feldolgozó program többszöri futtatása terheli a szervert..
    Elég vacak dolog php-ből javításra felszólítani a júzert, mert az email címébe pont helyett vesszőt ütött, amikor erre a hibára js-ből felhívhattad volna a figyelmét..
    Mutasd a teljes hozzászólást!
  • Elég vacak dolog php-ből javításra felszólítani a júzert,

    szerintem semmi nehézség nincs benne.

    júzerek 90%-ának eszébe sem jut átmenni rajta

    az a maradék 10% meg agyon szpemmeli az űrlapjaidat. Ami nagy része robot.
    Mutasd a teljes hozzászólást!
  • Asszem félreértesz.. Nem azzal van a bajom, hogy php-ből ellenőrzés, hanem azzal, hogy csak php-ből. Ha előtte ott a js, akkor az tehermentesítheti a szervert. A spam robotok, vagy az a bizonyos 10% majd felakadnak a php-n.

    Persze a tehermentesítés nem a 100 egyedi/nap látogatottságú oldalnak kell..
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd