Több helyes input esetén submit megjelenítés

Több helyes input esetén submit megjelenítés
2013-06-10T23:32:17+02:00
2013-09-01T16:36:40+02:00
2022-11-29T16:30:47+01:00
Dj Summer
Sziasztok

Ismét segítséget kérnék.
Egy regisztrációs űrlapon szeretném ellenőrizni js és php segítségével három input mező tartalmát.
Név, jelszó, jelszó ismét.
Amennyiben helyes a beírt tartalom akkor megjelenik egy pipa az adott mező mellett, ha helytelen akkor piros x meg hibaüzenet.
Ez eddig megy is viszont azt szeretném hogy ha mindhárom mező tartalma helyes akkor megjelenjen egy sumit gomb.
js:

function controll() { var username = $('#user_name').val(); var userpassword = $('#user_password').val(); var userpassword2 = $('#user_password2').val(); if (username == "" || username.length < 5) { $('#errors').fadeOut(); $('#nr').hide(); $('#nu').fadeIn(); $('#user_name').css('border', '1px #ccc solid'); } else { $.ajax({ type: "POST", url: "new_reg.php", data: 'names='+ username, cache: false, success: function(response){ if (response == 1) { $('#errors').fadeIn(); $('#errors').css('background-color', '#ff0000'); $('#errors').css('color', '#fff'); $('#errors').css('font-size', '11px'); $('#errors').css('padding', '1px'); $('#nu').fadeOut(); $('#nj').hide(); $('#nr').fadeIn(); $('#errors').html('<table align="center" cellspacing="0" cellpadding="0" style="font-weight:bold; background-color:#ff0000;" width="100%"><tr><td align="center">Ez a név foglalt!</td>\n</tr>\n</table>'); $('#user_name').css('border', '1px #C33 solid'); } else if (response == 2) { $('#errors').fadeIn(); $('#errors').css('background-color', '#ff0000'); $('#errors').css('color', '#fff'); $('#errors').css('font-size', '11px'); $('#errors').css('padding', '1px'); $('#nu').fadeOut(); $('#nj').hide(); $('#nr').fadeIn(); $('#errors').html('<table align="center" cellspacing="0" cellpadding="0" style="font-weight:bold; background-color:#ff0000;" width="100%"><tr><td align="center">Tiltott karakter a névben!</td>\n</tr>\n</table>'); $('#user_name').css('border', '1px #C33 solid'); } else if (response == 3) { $('#errors').fadeOut(); $('#nu').fadeOut(); $('#nr').hide(); $('#nj').fadeIn(); $('#user_name').css('border', '1px #ccc solid'); } } }); } if (userpassword.length == 0 || userpassword.length < 8) { $('#errors').hide(); $('#pu').fadeIn(); $('#pr').hide(); $('#pj').hide(); $('#user_password').css('border', '1px #ccc solid'); } else { $.ajax({ type: "POST", url: "new_reg.php", data: 'pass='+ userpassword, cache: false, success: function(response){ if (response == 4) { $('#errors').fadeIn(); $('#errors').css('background-color', '#ff0000'); $('#errors').css('color', '#fff'); $('#errors').css('font-size', '11px'); $('#errors').css('padding', '1px'); $('#pu').hide(); $('#pj').hide(); $('#pr').fadeIn(); $('#errors').html('<table align="center" cellspacing="0" cellpadding="0" style="font-weight:bold; background-color:#ff0000;" width="100%"><tr><td align="center">Tiltott karakter a jelszóban!</td>\n</tr>\n</table>'); $('#user_password').css('border', '1px #C33 solid'); } else if (response == 5) { $('#errors').hide(); $('#pu').hide(); $('#pr').hide(); $('#pj').fadeIn(); $('#user_password').css('border', '1px #ccc solid'); } } }); } if (userpassword2.length == 0 || userpassword2.length < 8) { $('#errors').hide(); $('#pru').fadeIn(); $('#rpr').hide(); $('#rpj').hide(); $('#user_password2').css('border', '1px #ccc solid'); } else { $.ajax({ type: "POST", url: "new_reg.php", data: 'repass='+userpassword2+'&conpass='+userpassword, cache: false, success: function(response){ if (response == 6) { $('#errors').fadeIn(); $('#errors').css('background-color', '#ff0000'); $('#errors').css('color', '#fff'); $('#errors').css('font-size', '11px'); $('#errors').css('padding', '1px'); $('#pru').hide(); $('#rpj').hide(); $('#rpr').fadeIn(); $('#errors').html('<table align="center" cellspacing="0" cellpadding="0" style="font-weight:bold; background-color:#ff0000;" width="100%"><tr><td align="center">A két jelszó nem egyezik!</td>\n</tr>\n</table>'); $('#user_password2').css('border', '1px #C33 solid'); } else if (response == 7) { $('#errors').hide(); $('#pru').hide(); $('#rpr').hide(); $('#rpj').fadeIn(); $('#user_password2').css('border', '1px #ccc solid'); } } }); } }
php:

if (isset($_POST['names'])) { $user_name = stripinput(trim(preg_replace("/ +/i", " ", $_POST['names']))); $keres = stripinput(trim(iconv("UTF-8", "iso-8859-2", $user_name))); $one_user = dbquery("SELECT * FROM ".DB_USERS." WHERE user_name LIKE '".$keres."%' ORDER BY user_name ASC"); if (!preg_check("/^[-0-9A-Z_@\s]+$/i", $user_name)) { echo 2; } elseif (dbrows($one_user)) { echo 1; } else { echo 3; } } elseif (isset($_POST['pass'])) { $pass = $_POST['pass']; if (preg_match("/^[0-9A-Z@!#$%&\/\(\)=\-_?+\*\.,:;]{8,64}$/i", $pass)) { echo 5; } else { echo 4; } } elseif (isset($_POST['repass']) && isset($_POST['conpass'])) { $repass = $_POST['repass']; $conpass = $_POST['conpass']; if ($repass!= "" && $conpass!= "" && $repass == $conpass) { echo 7; } else { echo 6; } } else { echo "<table align='center' cellspacing='2' cellpadding='2' style='size:12px; color:#fff;' width='100%'><tr>"; echo "<td align='left' style='width:30%' valign='top'>név:</td>\n"; echo "<td align='right' valign='top'>"; echo "<input type='text' name='user_name' id='user_name' maxlength='30' value='".$rg_name."' class='textbox' style='width:280px;' onKeyUp="controll();" /></td>\n"; echo "<td align='center' style='width:13px;' valign='top'><img id='nu' src='".IMAGES."ures.png' alt='' width='12' /><img id='nj' src='".IMAGES."yes.png' alt='' width='12' /><img id='nr' src='".IMAGES."no.png' alt='' width='12' /></td>\n"; echo "</tr>\n<tr>"; echo "<td align='left' style='width:30%' valign='top'>jelszó:</td>\n"; echo "<td align='right' valign='top'><input id='user_password' type='password' name='user_password' maxlength='64' value='' class='textbox' style='width:280px;' onKeyUp="controll();" /></td>\n"; echo "<td align='center' style='width:13px;' valign='top'><img id='pu' src='".IMAGES."ures.png' alt='' width='12' /><img id='pj' src='".IMAGES."yes.png' alt='' width='12' /><img id='pr' src='".IMAGES."no.png' alt='' width='12' /></td>\n"; echo "</td>\n"; echo "</tr>\n<tr>"; echo "<td align='left' style='width:30%' valign='top'>jelszó ismét:</td>\n"; echo "<td align='right' valign='top'><input id='user_password2' type='password' name='user_password2' maxlength='64' value='' class='textbox' style='width:280px;' onKeyUp="controll();" /></td>\n"; echo "<td align='center' style='width:13px;' valign='top'><img id='pru' src='".IMAGES."ures.png' alt='' width='12' /><img id='rpj' src='".IMAGES."yes.png' alt='' width='12' /><img id='rpr' src='".IMAGES."no.png' alt='' width='12' /></td>\n"; echo "</tr>\n<tr>"; echo "<td align='center' colspan='3'><br />\n<input id='mutat' style='display: none;' type='submit' name='felir' value='tovább' onclick='namepass(document.getElementById('names').value, document.getElementById('pass').value);' /></td>\n"; echo "</tr>\n</table>\n"; }
Ez a submit megjelenítés viszont nem akar összejönni, mivel külön ellenőrzi és jeleníti meg az eredményeket.
Ebben az esetben hogy lehetne ellenőrizni hogy mindhárom adat helyes-e?
Hozzáteszem úgy hogy ne kelljen még egyszer összesítve ellenőriznem a 3 adat helyességét.
Vagy ez így nem kivitelezhető csak ha újra ellenőrzöm egyszerre mind?
Form direkt nincs benne.
Előre is köszönöm a segítséget!
Mutasd a teljes hozzászólást!
Én lehet ajaxot használnék, ami alapján folyamatos lenne az ellenőrzés és ha megfelelő a kritérium, akkor az alapján már vissza is kapnád a submit gombot. De csak egy ötlet.
Mutasd a teljes hozzászólást!

  • bb-validation/example/registration-form at master · inf3rno/bb-validation

    Itt konkrétan disabled-et szedi le róla akkor... Amúgy lehet használni tetszőleges js validator-t erre, van egy rakat, én is csak az aszinkron validálás miatt írtam sajátot...

    Érdemes lehet json-ban letárolni, hogy mire validálsz, aztán ugyanazt a json-t fel tudod használni szerver és kliens oldalon... Ha tényleg csak egy űrlap van, és nem általános megoldás kell, akkor elég egy map-be (object-be) menteni, hogy van e hiba, vagy nincs, aztán minden változásnál összegezni az eredményt. Egy sima for-in ciklussal meg tudod oldani...
    Mutasd a teljes hozzászólást!
  • Ez egy több lépcsős regisztráció lenne lépésekre bontva.
    Első lépésben a felhasználónév és jelszó majd az avatar feltöltés és utána pár alap adat s ha minden sikeres akkor regisztrálja.
    Igaz kritériumként írtam hogy ne kelljen újra leellenőriznie az adatok helyességét, de másként nem sikerült megoldanom.
    Egy másik függvény közben figyeli mindhárom adatot s ha minden jó akkor megjeleníti a submit gombot a tovább lépéshez.
    Nem tudom mennyire jó megoldás ez,de eddig tökéletesen működik szerencsére.
    Egy darabig így marad ha nem lesz rá más megoldás.
    Amiket írtál még egy kicsit magasak nekem ennyire nem mélyültem még el ebben a témában,de köszönöm!
    Mutasd a teljes hozzászólást!
  • Én lehet ajaxot használnék, ami alapján folyamatos lenne az ellenőrzés és ha megfelelő a kritérium, akkor az alapján már vissza is kapnád a submit gombot. De csak egy ötlet.
    Mutasd a teljes hozzászólást!
  • Tökéletes, köszönöm szépen!
    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