Jump to content

Tutorial: creare formular de login in javascript !


Recommended Posts

 

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 !

 

  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 !

 

0BLLtz9.png

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...