th3#afk Posted May 2 Share Posted May 2 Crearea unui formular care colectează numele, prenumele, e-mailul, id-ul de utilizator și parola. Toate intrările sunt obligatorii iar adresa de e-mail introdusă trebuie să fie în format corect. De asemenea, valorile introduse în câmpurile de parolă și de confirmare a parolei trebuie să fie aceleași. La trecerea în alt câmp se face validarea folosind JavaScript afișandu-se mesaje de eroare în culoarea roșie, lângă caseta de text în care există o eroare și se va afișa mesajul OK în caz că corespunde. <html> <head> <title>Form Validation</title> <script> var divs = new Array(); divs[0] = "errFirst"; divs[1] = "errLast"; divs[2] = "errEmail"; divs[3] = "errUid"; divs[4] = "errPassword"; divs[5] = "errConfirm"; function validate() { var inputs = new Array(); inputs[0] = document.getElementById('first').value; inputs[1] = document.getElementById('last').value; inputs[2] = document.getElementById('email').value; inputs[3] = document.getElementById('uid').value; inputs[4] = document.getElementById('password').value; inputs[5] = document.getElementById('confirm').value; var errors = new Array(); errors[0] = "<span style='color:red'>Please enter your first name!</span>"; errors[1] = "<span style='color:red'>Please enter your last name!</span>"; errors[2] = "<span style='color:red'>Please enter your email!</span>"; errors[3] = "<span style='color:red'>Please enter your user id!</span>"; errors[4] = "<span style='color:red'>Please enter your password!</span>"; errors[5] = "<span style='color:red'>Please confirm your password!</span>"; for (i in inputs) { var errMessage = errors[i]; var div = divs[i]; if (inputs[i] == "") document.getElementById(div).innerHTML = errMessage; else if (i==2) { var atpos=inputs[i].indexOf("@"); var dotpos=inputs[i].lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length) document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>"; else document.getElementById(div).innerHTML = "OK!"; } else if (i==5) { var first = document.getElementById('password').value; var second = document.getElementById('confirm').value; if (second != first) document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>"; else document.getElementById(div).innerHTML = "OK!"; } else document.getElementById(div).innerHTML = "OK!"; } } function finalValidate() { var count = 0; for(i=0;i<6;i++) { var div = divs[i]; if(document.getElementById(div).innerHTML == "OK!") count = count + 1; } if(count == 6) document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!"; } </script> </head> <body> <table id="table1"> <tr> <td>First Name:</td> <td><input type="text" id="first" onkeyup="validate();" /></td> <td><div id="errFirst"></div></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" id="last" onkeyup="validate();"/></td> <td><div id="errLast"></div></td> </tr> <tr> <td>Email:</td> <td><input type="text" id="email" onkeyup="validate();"/></td> <td><div id="errEmail"></div></td> </tr> <tr> <td>User Id:</td> <td><input type="text" id="uid" onkeyup="validate();"/></td> <td><div id="errUid"></div></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="password" onkeyup="validate();"/></td> <td><div id="errPassword"></div></td> </tr> <tr> <td>Confirm Password:</td> <td><input type="password" id="confirm" onkeyup="validate();"/></td> <td><div id="errConfirm"></div></td> </tr> <tr> <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td> <td><div id="errFinal"></div></td> </tr> </table> </body> </html> Enjoy ! Quote Pagina Facebook Gamelife Este nevoie de 20 de ani ca sa ti construiesti o reputatie si de 5 minute ca sa o strici ! Daca te gandesti la asta , vei face lucrurile diferit ! Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.