0

I have some JavaScript which will do some basic error checking on my registration form (makes sure all fields are filled, passwords match etc.) and the submit button is disabled until the fields are entered correctly. There is also a div above the form that will display which bits of the form need correcting.

The code runs fine on Google Chrome, but using IE10 it only seems to run half of the JavaScript. It prints the error messages for everything apart from the security question's answer, and the submit button stays disabled even when all fields are correct (which are the last 2 parts of the JavaScript function).

The page can be found here, and the JavaScript function contains this code:

function timerFunc() {
    var success = 1;
    errors.innerHTML = "";
    if (fname.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Forename Required.</p>";
        success = 0;
    }
    if (sname.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Surname Required.</p>";
        success = 0;
    }
    if (email.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Email Required.</p>";
        success = 0;
    } else {
        success = verifyEmail(email.value);
    }
    if (uname.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Username Required.</p>";
        success = 0;
    }
    if (pword.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Password Required.</p>";
        success = 0;
    } else if (pword.value.length < 8) {
        errors.innerHTML = errors.innerHTML + "<p>Password Must Have 8 Characters.</p>";
        success = 0;
    }
    if ((pword1.value != "") && (pword1.value != pword.value)) {
        errors.innerHTML = errors.innerHTML + "<p>Passwords Don't Match.</p>";
        success = 0;
    }
    if (seca.value == "") {
        errors.innerHTML = errors.innerHTML + "<p>Security Answer Required.</p>";
        success = 0;
    }
    if (success == 1) {
        submit.disabled = false;
    } else {
        submit.disabled = true;
    }
}

It may be something really simple to fix it, but I don't understand why it works perfectly in Chrome and not IE. Thanks in advance, Jake.

Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
crazyloonybin
  • 935
  • 3
  • 18
  • 36
  • 1
    `errors` is defined at a higher scope? Open IE's error console with F12. Any errors? The posted code is syntactically valid, but some of the vars could be out of scope. – Michael Berkowski Nov 09 '12 at 19:09
  • ...and some of your DOM references could be broken. You don't show how they're defined. – Diodeus - James MacFarlane Nov 09 '12 at 19:10
  • Make sure you're selecting all of your elements through `document.getElementById`, and not relying on the non-standard global variables that some browsers create. – jbabey Nov 09 '12 at 19:13
  • @MichaelBerkowski thanks, turns out I hadn't declared pword1, done that and works now! If you put that as a proper answer I'll mark it as correct for you :) Any reason as to why it works in Chrome still without the declaration? – crazyloonybin Nov 09 '12 at 19:15

1 Answers1

1

In RegFunc try adding this line:

pword1 = document.getElementById("pword1");

pword1 is not defined - this is printed infinitely on the console - F12 is your friend in IE9+

Sebastian
  • 7,729
  • 2
  • 37
  • 69
  • Thanks Sebastian, just seen that mistake myself - been a long day! Do you know why it still works on Chrome without the declaration? – crazyloonybin Nov 09 '12 at 19:19
  • 1
    I think that's the "standard" where all elements that have an ID are automatically available as globals - pretty annoying... see here: http://stackoverflow.com/questions/6381425/should-the-id-of-elements-be-made-global-variables-and – Sebastian Nov 09 '12 at 19:20
  • Ahh interesting that some implement that methodology and some don't - thanks for the info! – crazyloonybin Nov 09 '12 at 20:40