[MOD] Ajax Password / E-Mail Confirmation

[rinaldos]

@Hoelsch,
wie wäre es, wenn du mal alle "Überflüssigen Java Scripte" entfernst, und dann mal probierst. Wenn es dann geht, die Scripte wieder einzeln hinzufügen. Dann findest du schnell den schuldigen..... Der IE ist eben etwas empfindlicher als andere Browser

Gruß

[Rembrandt]

Hi!
sorry mein fehler.

erster post wurde editiert:

http://www.4homepages.de/forum/index.php?topic=26268.msg142823#msg142823

mfg Andi

[Hoelsch]

Moin Andi,

habe ich eingefügt, aber funktioniert leider immernoch nicht. Beim Drücken auf die Knöpfe "Abschicken" und "Zurücksetzen" passiert garnichts. Vielleicht geht es ja bei euch:

http://www.fotos-von-gestern.de/register.php

[Sunny C.]

Bei mir, funktioniert es IE8 / FF 3.5.5

[Rembrandt]

Hi!

ich habe ein Code Update  vorgenommen, seht es euch mal an.

geändert wurde der javascript code und die register_form.html.

jetzt werden das passwort und die email eingabe überprüft, und statt dem text darunter habe ich icons rechts von den eingabfeldern plaziert.

http://www.4homepages.de/forum/index.php?topic=26268.msg142823#msg142823

mfg Andi

[Hoelsch]

Ja! Das ist doch perfekt!

Genau das, was ich wollte!

Vielen Dank Rembrandt!

Ich habe jetzt übrigens den Fehler gefunden weshalb die Registrierung bei mir im IE nicht mehr funktioniert hat.
Diese Zeile:

Code: [Select]

<input type="password" name="user_password" size="30" class="input" onkeyup="checkPassword()"/>muss geändert werden in:

Code: [Select]

<input type="password" name="user_password" size="30" value="{user_password}" class="input" onkeyup="checkPassword()"/>
Es fehlte der  Wert value="{user_password}". Das gleiche dann noch bei der Password Bestätigung mit rein und schon funktionert die Registrierung auch wieder bei mir im IE.

Bei der Mailadresse hattest du das mit dem Value drin stehen. Nur beim PW hast es vergessen.

Wer das Ganze jetzt mal als Demo funktionierend sehen möchte kommt mal auf:

http://www.fotos-von-gestern.de/register.php

Um den Usernamen zu checken habe ich dieses Skript verwendet:

http://www.4homepages.de/forum/index.php?topic=23848.0

[Rembrandt]

....
Bei der Mailadresse hattest du das mit dem Value drin stehen. Nur beim PW hast es vergessen.....

sorry, aber da habe ich nichts vergessen, was auch immer du da gefunden hast, "value="{user_password}"  ist nicht 4images konform.

mfg Andi

[Hoelsch]

stimmt - jetzt wo du es sagst fällts mir auch auf. aber als ich das geändert habe hat es auf einmal wieder mit dem ie funktioniert.

sehr mysteriös...

[Sunny C.]

Ob im Safari, Opera, IE oder FF funktioniert bei mir alles!

[Hoelsch]

ja - bei mir funktioniert es ja jetzt auch wieder. ich werde nochmal testen, ob es nun wirklich an diesem value eintrag lag.

@Sumale: Vielen Dank fürs Testen!

[Bommel]

Hallo allerseits,

ich bekomme im Browser schon seit längerem diese Fehlermeldung:

document.password_form is undefined
https://www.meine-domain.de/js/verifynotify.js
Line 19

Kann mich bitte einer aufklären, wo ich genau ansetzen muss? Ich weiß nicht mehr weiter.

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
addLoadEvent(function checkPassword() {

 field_password = document.password_form.user_password;
 field_password2 = document.password_form.user_password_2;
 password_id = "password_result";
 /* match_html = "<span style=\"color:blue\">Thank you, your passwords match!<\/span>";
 nomatch_html = "<span style=\"color:red\">Please make sure your passwords match.<\/span>"; */
 match_html = "<img src=\"js/yes.png\">";
 nomatch_html = "<img src=\"js/no.png\">";

this.field_password = field_password;
  this.field_password2 = field_password2;

this.password_id = password_id;
  this.match_html = match_html;
  this.nomatch_html = nomatch_html;

  this.checkPassword = function() {
    // Make sure we don't cause an error
    // for browsers that do not support getElementById
    if (!this.password_id) { return false; }
    if (!document.getElementById){ return false; }
    r = document.getElementById(this.password_id);
    if (!r){ return false; }

  if (this.field_password.value != "" && this.field_password.value == this.field_password2.value) {
      r.innerHTML = this.match_html;
    } else {
      r.innerHTML = this.nomatch_html;
    }
    } 

});

addLoadEvent(function checkMail() {

 field_email = document.password_form.user_email;
 field_email2 = document.password_form.user_email_2;
 email_id = "email_result";
 match_html = "<img src=\"js/yes.png\">";
 nomatch_html = "<img src=\"js/no.png\">";

this.field_email = field_email;
  this.field_email2 = field_email2;

this.email_id = email_id;
  this.match_html = match_html;
  this.nomatch_html = nomatch_html;

  this.checkMail = function() {
    // Make sure we don't cause an error
    // for browsers that do not support getElementById
    if (!this.email_id) { return false; }
    if (!document.getElementById){ return false; }
    r = document.getElementById(this.email_id);
    if (!r){ return false; }

  if (this.field_email.value != "" && this.field_email.value == this.field_email2.value) {
      r.innerHTML = this.match_html;
    } else {
      r.innerHTML = this.nomatch_html;
    }
    }
  });


Nachtrag:

So... ich habe jetzt vorerst einmal die Javaüberprüfung rausgenommen. Die Fehlermeldung taucht jetzt nicht mehr auf. Habe es auf die Todo-Liste gesetzt und werde mich diesem Problem später widmen.

[x23piracy]

Hallo allerseits,

ich bekomme im Browser schon seit längerem diese Fehlermeldung:

document.password_form is undefined
https://www.meine-domain.de/js/verifynotify.js
Line 19

So... ich habe jetzt vorerst einmal die Javaüberprüfung rausgenommen. Die Fehlermeldung taucht jetzt nicht mehr auf. Habe es auf die Todo-Liste gesetzt und werde mich diesem Problem später widmen.

Hi,

das gleiche Problem hier, verifynotify (Zeile 19, Zeichen 2).

Code: [Select]

Fehler: document.password_form is undefined
Quelldatei: http://adresse/js/verifynotify.js
Zeile: 19
Das ist diese Zeile hier:

Code: [Select]

field_password = document.password_form.user_password;
Zur Installation:

Da ich den ganzen Thread leider etwas verwirrend finde, hoffe ich das trotzdem
richtig gemacht zu haben:

http://www.4homepages.de/forum/index.php?topic=26268.msg142836#msg142836

Dann habe ich das hier noch nachgeholt da mir nicht klar war ob das Code Update einen
Ersatz für den ersten Post darstellen sollte:

http://www.4homepages.de/forum/index.php?topic=26268.msg142823#msg142823

und das hier ist dann auch noch eingeflossen:

http://www.4homepages.de/forum/index.php?topic=26268.msg142927#msg142927

Alles aus diesem Thread in merkwürdiger Chronologischer Reihenfolge
Trotz des Fehler funktioniert die überprüfung von email und pass auch die grafiken werden angezeigt.

Wenn ich das richtig interpretiere wird ja hier der form name definiert den das script ansprechen will:

Code: [Select]

<form method="POST" name="password_form" action="{url_register}">
Das ist bei mir vorhanden und fehlt nicht.

Code: [Select]

<input type="password" name="user_password" size="30" class="input" onkeyup="checkPassword()"/>
user_password sollte ja wie in meinem Fall das Feld sein auf das, dass script zugreifen will aber über die Zeile 19 meckert.

Wie kann also der Browser maulen wenn doch die Grundfunktion des scripts funktioniert und es
offensichtlich auf die form zugreifen können muss.

Ich versteh das leider nicht...


Gruß Jens

[Rembrandt]

so erster post editiert, auch die "verifynotify.js" datei...

http://www.4homepages.de/forum/index.php?topic=26268.msg142823#msg142823

mfg Andi

[x23piracy]

so erster post editiert, auch die "verifynotify.js" datei...

http://www.4homepages.de/forum/index.php?topic=26268.msg142823#msg142823

mfg Andi

Hi...
 
...ich hoffe ich darf das sagen... Andi

Danke für die Anpassung und das übersichtliche zusammenschrumpfen deines Ursprungsposts.
Beim überfliegen habe ich jetzt nur die Änderung der Script-Einbindung in die reg...html und
der Veränderung der js ausfindig machen können.

Das schlimme wenn man einmal dabei ist wird man Größenwahnsinnig, ich versuch mal "alleine"
eine Überprüfung auf das vorhandensein des Usernamens zu realisieren... da bin ich ja selbst gespannt...

Unterm Strich danke für deine Mühe. 


Gruß Jens

[b.o.fan]

MY CHANGE DO FOLLOWING. PLEASE DO ALL CHANGES.
UPDATE 11.10.2010 - 08:15 - ALL MY CHANGES. The rest is deleted.

Tested with FF 3.6
IE 6
IE 8

- Use Password Check in the Controlpanel.
- Password_1 / Password_2 Input flields empty, then the signs not show.
- EMail_1 / EMail_2 Input fields empty, then the signs not show.
- check the valid of the email-adress
   - if invalid email-adress, then show a text next the first email field
- It inspect the password. I Looks that
   - the pw is 6 Signs long
   - the pw has 1 little a-z (german äöü)
   - the pw has 1 Big A-Z (german ÄÖÜ)
   - the pw has 1 Number 0-9
   - the pw has 1 special character
Then It Shows a graphic.



Look @ Demo

[1].OPEN templates/YOUR_TEMPLATE/member_editprofile.html

[1].1 Find

Code: [Select]

<form method="post" action="{url_member}">Replace with

Code: [Select]

<form method="post" action="{url_member}" name="password_form">
<script type="text/javascript" src="./js/verifynotify.js"></script>
[1].2 Find

Code: [Select]

<tr>
            <td class="row2"><b>{lang_new_password}</b></td>
            <td class="row2"><input type="password" name="user_password" size="30" class="input" /></td>
          </tr>

          <tr>
            <td class="row1"><b>{lang_new_password_confirm}</b></td>
            <td class="row1"><input type="password" name="user_password2" size="30" class="input" /></td>
          </tr>
Replace with

Code: [Select]

         <tr>
            <td class="row1"><b>{lang_new_password}</b></td>
            <td class="row1">
                <input type="password" name="user_password" size="30" class="input" value="" onkeyup="checkPassword()"/>
                <span style="position:absolute;z-index:2" class="row2" id="save_result"> </span>
            </td>
          </tr>
          <tr>
            <td class="row1"><b>{lang_new_password_confirm}</b></td>
            <td class="row1" style="position:relative;z-index:1">
              <input type="password" name="user_password_2" size="30" class="input" value="" onkeyup="checkPassword()"/>
            <span style="position:absolute;z-index:2" class="row1" id="password_result"> </span></td>
          </tr>

[2].OPEN templates/YOUR_TEMPLATE/register_form.html

[2].1 Find

Code: [Select]

<tr>
  <td class="row2"><b>{lang_password}</b></td>
  <td class="row2">
    <input type="password" name="user_password" size="30" class="input" />
  </td>
</tr>
Replace with

Code: [Select]

<tr>
<td class="row2"><b>{lang_password}</b></td>
<td class="row2" style = "position:relative;z-index:1">
  <input type="password" name="user_password" size="30" class="input" value="" onkeyup="checkPassword()"/>
  <span style="position:absolute;z-index:2" class="row2" id="save_result"> </span>
</td>
</tr>
2.2 Find

Code: [Select]

<input type="text" name="user_email" size="30" class="input" value="{user_email}" onkeyup="checkMail()">Add _after

Code: [Select]

 <span style="position:absolute;z-index:2" class="row2" id="valid_result"> </span>
[3].OPEN templates/YOUR_TEMPLATE/header.html

[3].1 Find

Code: [Select]

-->Add ^before

Code: [Select]

{password_strong_lang}
[4].OPEN lang/YOUR_LANGUAGE/main.php
[for German use 4.1]
[for English use 4.2]

[4].1 Find

Code: [Select]

?>Add ^before [GERMAN]

Code: [Select]

//-----------------------------------------------------
//--- Passwordsicherheit ------------------------------
//-----------------------------------------------------
$lang['pw_js_step_1'] = "zu kurz (mind. 6 Zeichen)";
$lang['pw_js_step_2'] = "schlecht";
$lang['pw_js_step_3'] = "gut";
$lang['pw_js_step_4'] = "stark";
$lang['pw_js_pw_strong'] = "Passwortstärke";
$lang['email_js_fail'] = "ungültige eMail-Adresse";

[4].2 Find

Code: [Select]

?>Add ^before [ENGLISH]

Code: [Select]

//-----------------------------------------------------
//--- password strength -------------------------------
//-----------------------------------------------------
$lang['pw_js_step_1'] = "to short (not less than 6 Signs)";
$lang['pw_js_step_2'] = "bad";
$lang['pw_js_step_3'] = "good";
$lang['pw_js_step_4'] = "strong";
$lang['pw_js_pw_strong'] = "password strength";
$lang['email_js_fail'] = " invalid email address";
[5].OPEN includes/page_header.php

[5].1 Find

Code: [Select]

// Replace Globals in $lang
$lang = $site_template->parse_array($lang);Add _after

Code: [Select]

$password_js_vars = "   var step_1 = \"".$lang['pw_js_step_1']."\";\n";
$password_js_vars .= "   var step_2 = \"".$lang['pw_js_step_2']."\";\n";
$password_js_vars .= "   var step_3 = \"".$lang['pw_js_step_3']."\";\n";
$password_js_vars .= "   var step_4 = \"".$lang['pw_js_step_4']."\";\n";
$password_js_vars .= "   var pw_strong = \"".$lang['pw_js_pw_strong']."\";\n";
$password_js_vars .= "   var email_valid = \"".$lang['email_js_fail']."\";\n";
[5].2 Find

Code: [Select]

"direction" => $lang['direction']Replace with

Code: [Select]

"direction" => $lang['direction'],
  ###########################################################
  # PASSOWRD TEST                                             #
  "password_strong_lang" => $password_js_vars
  ###########################################################
[6].OPEN js/verifynotisy.js

[6].1 Find

Code: [Select]

 var nomatch_html = "<img src=\"js/no.png\">";Add _after

Code: [Select]

 var save_1_html = "&nbsp;<img src=\"js/02.png\"><img src=\"js/01.png\"><img src=\"js/01.png\"><img src=\"js/01.png\"><img src=\"js/01.png\">";
  var save_2_html = "&nbsp;<img src=\"js/02.png\"><img src=\"js/02.png\"><img src=\"js/01.png\"><img src=\"js/01.png\"><img src=\"js/01.png\">";
  var save_3_html = "&nbsp;<img src=\"js/03.png\"><img src=\"js/03.png\"><img src=\"js/03.png\"><img src=\"js/01.png\"><img src=\"js/01.png\">";
  var save_4_html = "&nbsp;<img src=\"js/03.png\"><img src=\"js/03.png\"><img src=\"js/03.png\"><img src=\"js/03.png\"><img src=\"js/01.png\">";
  var save_5_html = "&nbsp;<img src=\"js/04.png\"><img src=\"js/04.png\"><img src=\"js/04.png\"><img src=\"js/04.png\"><img src=\"js/04.png\">";
  function validEmail(email) {
    var strReg = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$";
    var regex = new RegExp(strReg);
    return(regex.test(email));
  }
6.2 Find

Code: [Select]

   password_id = "password_result";Add _after

Code: [Select]

   save_id = "save_result";
6.3 Find

Code: [Select]

r = document.getElementById(this.password_id);Add _after

Code: [Select]

s = document.getElementById(this.save_id);
if ((document.password_form.user_password.value == ""))
  {
    s.innerHTML = "";
    document.password_form.user_password_2.value = "";
    document.password_form.user_password.focus();
  }
  else
  {
    score = 0;
    if(document.password_form.user_password.value.match(/[a-zäöü]{1,}/)) {score = score + 1;}
    if(document.password_form.user_password.value.match(/[A-ZÄÖÜ]{1,}/)) {score = score + 1;}
    if(document.password_form.user_password.value.match(/\d{1,}/)) {score = score + 1;}
    if(document.password_form.user_password.value.match(/\W/)) {score = score + 1;}
    if (document.password_form.user_password.value.length >= 6)
     {
        if (score == 4)
        {
           s.innerHTML = this.save_5_html + " <b>" + pw_strong + "</b>: " + step_4 + " ";
        }
        else if (score == 3)
        {
           s.innerHTML = this.save_4_html + " <b>" + pw_strong + "</b>: " + step_3 + " ";
        }
        else if (score == 2)
        {
           s.innerHTML = this.save_3_html + " <b>" + pw_strong + "</b>: " + step_3 + " ";
        }
        else if (score == 1)
        {
           s.innerHTML = this.save_2_html + " <b>" + pw_strong + "</b>: " + step_2 + "  " ;
        }
     }
     else
     {
        s.innerHTML = this.save_1_html + " <b>" + pw_strong + "</b>: " + step_1 + "  ";
     }
  }
6.3 Find

Code: [Select]

if (document.password_form.user_password.value != "" && document.password_form.user_password.value == document.password_form.user_password_2.value) {Replace with

Code: [Select]

     if ((document.password_form.user_password.value == "") && (document.password_form.user_password_2.value == ""))
  {
    r.innerHTML = "";
  }
      else if (document.password_form.user_password.value != "" && document.password_form.user_password.value == document.password_form.user_password_2.value) {
6.4 Find

Code: [Select]

   email_id = "email_result";Add _after

Code: [Select]

   valid_id = "valid_result";
6.5 Find

Code: [Select]

r = document.getElementById(this.email_id);Add _after

Code: [Select]

s = document.getElementById(this.valid_id);
if (!s){ return false;}
6.6 Find

Code: [Select]

if (!r){ return false; }
  
      if (this.field_email.value != "" && this.field_email.value == this.field_email2.value) {
        r.innerHTML = this.match_html;
      }
      else {
        r.innerHTML = this.nomatch_html;
      }Replace with

Code: [Select]

if (!validEmail(this.field_email.value) && this.field_email.value == "")
  {
    r.innerHTML = "";
    s.innerHTML = "";
  }
  else if (!validEmail(this.field_email.value))
  {
    r.innerHTML = this.nomatch_html;
    s.innerHTML = "<b>" + email_valid + "</b>";
  }
  else
  {
    if ((this.field_email.value == "") && (this.field_email2.value == ""))
    {
        r.innerHTML = "";
        s.innerHTML = "";
    }
    else if (this.field_email.value != "" && this.field_email.value == this.field_email2.value)
    {
        r.innerHTML = this.match_html;
        s.innerHTML = "";
    }
    else
    {
        r.innerHTML = this.nomatch_html;
        s.innerHTML = "";
    }
  }
Save 01.png/02.png/03.png/04.png. Copy the 4 Files into /js/!

Please Say Thanks or Say what is not good.


[UPDATE]
my function validEmail()
say OK when email Adress is following
name@example.com
or
name@exampel
because
http://forum.de.selfhtml.org/archiv/2003/4/t43470/#m237448

Maybe SomeOne will update my Function.