Problem In Ie With Following Js Code

[stijn0713]

Does somebody know why this js doesn't work in IE?

 

<script type="text/javascript" >
function formValidation() {

var t1ck=true;
var msg=" ";

var naam1 = document.getElementById("t1").value ;
var naam2 = document.getElementById("t2").value;
var email = document.getElementById('email');
var filter = /^([a-zA-Z0-9_\.\-])+\@student.ua.ac.be+$/;
var emailBestaat = "";

// style voor als paswoorden matchen
if(naam1 != '' && naam2 != '' && naam1 == naam2) { document.getElementById("t1").style.border="1px solid green";
document.getElementById("t2").style.border="1px solid green";
document.getElementById("pwMatch").style.display="";
} else { document.getElementById("t1").style.border= "";
document.getElementById("t2").style.border= "";
document.getElementById("pwMatch").style.display="none";
}

// style voor als email goed is
if(filter.test(email.value)) {
document.getElementById("slecht").style.display="none";
document.getElementById("goed").style.display="inline";
}
//
else { document.getElementById("slecht").style.display="inline";
document.getElementById("goed").style.display="none";
}

if(email.value == ''){
document.getElementById("slecht").style.display="none";
document.getElementById("goed").style.display="none";
}

if(naam1 == '' || naam2 == '' || naam1 != naam2) { t1ck=false; }
if (!filter.test(email.value)) { t1ck=false;}
if(!document.getElementById("r1").checked && !document.getElementById("r2").checked){ t1ck=false;}
if(!document.getElementById("c1").checked ){ t1ck=false;}

if(t1ck){document.getElementById("btnSignUp").disabled = false;}
else{document.getElementById("btnSignUp").disabled = true; }
}

function resetForm(){
document.getElementById("btnSignUp").disabled = true;
var frmMain = document.forms[0];
frmMain.reset();
}

window.onload = function () {

var btnSignUp = document.getElementById("btnSignUp");
var btnReset = document.getElementById("btnReset");

var t1 = document.getElementById("t1");
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");
var c1= document.getElementById("c1");
var email = document.getElementById("email");

var t1ck=false;
document.getElementById("btnSignUp").disabled = true;
email.onblur = formValidation;
t1.onkeyup = formValidation;
t2.onkeyup = formValidation;
r1.onclick = formValidation;
r2.onclick = formValidation;
c1.onclick = formValidation;
btnReset.onclick = resetForm;
}
</script>

 

form:

<form id="form2" name="form1" method="POST" action="">
   <table>
       <tr>
           <td>Email</td>
           <td><input type="text" name="email" id="email" />
               <div style= 'display: none' id ='slecht'><img src="Images/slecht.gif" border="0" alt="nok" /><span>dit is geen geldig UA email adres</span></div>
               <div id='goed' style='display: none'><img src="Images/goed.gif" border="0" alt="ok" /></div>
           </td>
       </tr>
       <tr>
           <td>Paswoord</td>
           <td><input type="password" id="t1" name="paswoord"></td>
       </tr>
       <tr>
           <td>Verifier paswoord</td>
           <td><input type="password" id="t2" name="paswoord2">
               <div id ='pwMatch'style='display: none; color:#C0C0C0'>Paswoord match!</div>
           </td>
       </tr>
       <tr>
           <td>Geslacht</td>
           <td><input type="radio" id="r1" name="gender" value=Male>Man <input type="radio" id="r2" name="gender" value=Female>Vrouw</td>
       </tr>
       <tr>
           <td>Terms & Condition</td>
           <td><input type=checkbox name=agree value=yes id=c1></td>
       </tr>
       <tr>
           <td align='right'><input type=reset id=btnReset value=Reset></td>
           <td><input type="submit" name="btnSignUp" id="btnSignUp" value="Sign Up!!" /> </td>
       </tr>
   </table>
</form>

[Jessica]

That's a lot of code and a little "doesn't work".

What is the goal? What is the outcome? What "doesn't work" and how? What have you done so far to debug it?

[stijn0713]

i think the problem comes in the part where i want to unstyle the border for t1 and t2 textfields with:

 

else { document.getElementById("t1").style.border= "";

document.getElementById("t2").style.border= "";

 

the border of the textfield is removed in IE

[Jessica]

Once again - you haven't said what the problem is. You want to unstyle a border? What does that mean? Remove it? Then you say the border is removed in IE? So what is the problem?

 

My solution: use jQuery. It's cross-browser compliant and much easier to use that this stuff.

 

[stijn0713]

I want to unstyle the border, e.g. remove the green edge! But either the border of the textfield is literally removed, either the border looks black. In other world, i cannot see the DEFAULT grey border! Neither with jquery i works!!

[Jessica]

Then set the border to 1px solid grey, instead of nothing.

[Adam]

As Jessica mentioned, jQuery makes DOM manipulation really easy, I would take a look into it. Although you could still save yourself some trouble without using it, by just adding/removing a class name instead of trying to change individual styles.