Javascript Password Change Form Validation doesn't work on IE8

Question

Hi,

got this function to validate two fields from a changing password form and it's doesn't seem to work at IE8. FF, Opera, Safari and Chrome work.

function chk_form_pw()
{
 if(document.getElementById('new_passwd').value == '')
 {
  alert("<?php _e('Please enter New Password') ?>");
  document.getElementById('new_passwd').focus();
  return false;
 }
 if(document.getElementById('new_passwd').value.length < 5 )
 {
  alert("<?php _e('Please enter New Password minimum 5 chars') ?>");
  document.getElementById('new_passwd').focus();
  return false;
 }
 if(document.getElementById('cnew_passwd').value == '')
 {
  alert("<?php _e('Please enter Confirm New Password') ?>");
  document.getElementById('cnew_passwd').focus();
  return false;
 }
 if(document.getElementById('cnew_passwd').value.length < 5 )
 {
  alert("<?php _e('Please enter Confirm New Password minimum 5 chars') ?>");
  document.getElementById('cnew_passwd').focus();
  return false;
 }
 if(document.getElementById('new_passwd').value != document.getElementById('cnew_passwd').value)
 {
  alert("<?php _e('New Password and Confirm New Password should be same') ?>");
  document.getElementById('cnew_passwd').focus();
  return false;
 }
}

This is the form:

<form name="registerform" id="registerform" action="<?php echo get_option( 'siteurl' ).'/?page=account&chagepw=1'; ?>" method="post">
<p><label><?php _e('New Password'); ?> <span class="indicates">*</span></label></p>
<p><input type="password" name="new_passwd" id="new_passwd"  class="lostpass_textfield" /></p>
<p><label><?php _e('Confirm New Password'); ?> <span class="indicates">*</span></label></p>
<p><input type="password" name="cnew_passwd" id="cnew_passwd"  class="lostpass_textfield" /></p>
<p><input type="submit" name="Update" onclick="return chk_form_pw();" value="<?php _e('Update Password') ?>" class="btn grey"/></p>
</form>

And here is the chagepw=1 thing:

<?php
if($_POST)
{
    if($_REQUEST['chagepw'])
    {
        $new_passwd = $_POST['new_passwd'];
        if($new_passwd)
        {
            $user_id = $current_user->data->ID;
            wp_set_password($new_passwd, $user_id);
            $message1 = "Password Changed successfully.You need to sign back in.";
        }

    }else
    {
        $user_id = $userInfo['ID'];
        $user_add1 = $_POST['user_add1'];
        $user_add2 = $_POST['user_add2'];
        $user_city = $_POST['user_city'];
        $user_state = $_POST['user_state'];
        $user_country = $_POST['user_country'];
        $user_postalcode = $_POST['user_postalcode'];

        $buser_add1 = $_POST['buser_add1'];
        $buser_add2 = $_POST['buser_add2'];
        $buser_city = $_POST['buser_city'];
        $buser_state = $_POST['buser_state'];
        $buser_country = $_POST['buser_country'];
        $buser_postalcode = $_POST['buser_postalcode'];
        $user_address_info = array(
                            "user_add1"     => $user_add1,
                            "user_add2"     => $user_add2,
                            "user_city"     => $user_city,
                            "user_state"    => $user_state,
                            "user_country"  => $user_country,
                            "user_postalcode"=> $user_postalcode,
                            "buser_name"    => $_POST['buser_fname'].'  '.$_POST['buser_lname'],
                            "buser_add1"    => $buser_add1,
                            "buser_add2"    => $buser_add2,
                            "buser_city"    => $buser_city,
                            "buser_state"   => $buser_state,
                            "buser_country" => $buser_country,
                            "buser_postalcode"=> $buser_postalcode,
                            );
        update_usermeta($user_id, 'user_address_info', serialize($user_address_info)); // User Address Information Here
        $userName = $_POST['user_fname'].'  '.$_POST['user_lname'];
        $updateUsersql = "update $wpdb->users set user_nicename=\"$userName\", display_name=\"$userName\"  where ID=\"$user_id\"";
        $wpdb->query($updateUsersql);
        $message = "Information Updated successfully.";
    }
}
$userInfo = $General->getLoginUserInfo();
$user_address_info = unserialize(get_user_option('user_address_info', $user_id));
$user_add1 = $user_address_info['user_add1'];
$user_add2 = $user_address_info['user_add2'];
$user_city = $user_address_info['user_city'];
$user_state = $user_address_info['user_state'];
$user_country = $user_address_info['user_country'];
$user_postalcode = $user_address_info['user_postalcode'];
$display_name = $userInfo['display_name'];
$display_name_arr = explode(' ',$display_name);
$user_fname = $display_name_arr[0];
$user_lname = $display_name_arr[2];
$buser_add1 = $user_address_info['buser_add1'];
$buser_add2 = $user_address_info['buser_add2'];
$buser_city = $user_address_info['buser_city'];
$buser_state = $user_address_info['buser_state'];
$buser_country = $user_address_info['buser_country'];
$buser_postalcode = $user_address_info['buser_postalcode'];
$bdisplay_name = $user_address_info['buser_name'];
$display_name_arr = explode(' ',$bdisplay_name);
$buser_fname = $display_name_arr[0];
$buser_lname = $display_name_arr[2];

if($_SESSION['redirect_page'] == '')
{
    $_SESSION['redirect_page'] = $_SERVER['HTTP_REFERER'];
}
if(strstr($_SESSION['redirect_page'],'page=checkout'))
{
    $login_redirect_link = get_option( 'siteurl' ).'/?page=checkout';
}
?>  

Answer 1

A smoother solution would be jQuery. There you can load a loading-animation, put color like red/green on wrong/correct and simplified print out text depending on what happening to the form.

Download jQuery from: http://docs.jquery.com/Downloading_jQuery

Then you insert it in the html code like this:

<script type="text/javascript" src="jquery.js">
</script>

Then you can have a valid.js like this:

  $(document).ready(function () {
  var validatefield = $('#validatefield');
  $('#validatefield').keyup(function () {
   var t = this; 
 if (this.value != this.lastValue) {
  if (this.timer) clearTimeout(this.timer);
  validatefield.html('<img src="images/Here_you_can_put_your_gif_animation" 

  alt="Loading..." 
  height="16" width="16"/>');

  this.timer = setTimeout(function () {
    $.ajax({

      url: 'check_field.php',
      data: 'action=check_field&field=' + encodeURIComponent(t.value),
      dataType: 'json',
      type: 'post',
 success: function (j) {
    if (j.ok) { 
            validatefield.html(j.msg); 
    }
    else if ($("#validatefield").val() == "")
    {       
    validatefield.html('');
    }

    else { 
         validatefield.html(j.msg);
    }
     }
    });
  }, 200);

  this.lastValue = this.value;
}
});
});

Then in the check_field.php, have this;

echo json_encode(check_field($_POST['field']));

function check_field($field) {
$fieldSum = stripslashes(strip_tags(trim(htmlspecialchars($field)))); 
$response = array(); 

if (strlen($fieldSum) > 15) {
 $response = array(
   'ok' => false, 
   'msg' => "The field characters were over 15!");      
} 
 else 
      {
$response = array(
  'ok' => true, 
  'msg' => "Correct");
}
return $response;        
}

The id #validatefield is an id inside the html code that you have to create in order to print things out.

Example:

<div id="validatefield">Here comes the text etc, from the valid.js</div>

Answer 2

Finally got it done using the JQuery script posted before:

http://code.google.com/p/form-validation-engine/downloads/list

It's been really easy to fit into my previous code and works flawlessly through every browser tested.

Thank you all for your help!