Welcome to WebmasterWorld Guest from 54.167.65.247

Forum Moderators: open

Message Too Old, No Replies

email validation does not work in IE7

     
9:06 pm on Feb 1, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


Works in Chrome, Firefox and Safari, but does not work in IE7. Where may be problem?

<script type="text/javascript">
<!-- Email validation
function ValidateEmail(email){

if (email.indexOf(' ') >= 0)//The indexOf() method returns the position of the first occurrence of a specified value in a string.
document.getElementById('CheckEmail').innerHTML = '<font color="#FF0000">Email is not valid. Please delete spaces.</font>';

}
//-->
</script>

<input onkeyup="ValidateEmail(this.value)" name="email" type="text" id="email"><i id="CheckEmail"></i>

9:38 pm on Feb 1, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


now checking... if it is the only javascript code in file, then ok, but if to add more javascript code, then does not work

I have also this code in file

<script type="text/javascript">
<!-- Username validation
//pass data without page refresh
function ValidateUsername(){
// Create our XMLHttpRequest object
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var hr = new XMLHttpRequest();
}
else
{// code for IE6, IE5
var hr = new ActiveXObject("Microsoft.XMLHTTP");
}
// Create some variables we need to send to our PHP file
var url = "username-checker.php";
var usn = document.getElementById("username").value;

var vars = "&username="+usn;

hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("CheckUsername").innerHTML = return_data;

}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("CheckUsername").innerHTML = "processing...";
}
</script>
9:50 pm on Feb 1, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


Here's an unfiltered description of what I see wrong:

1. Don't put HTML comments inside of <script> tags.
2. Don't use <font> tags. Control presentation with CSS.
3. Don't use <i> tags (optional). Control presentation with CSS.*

* Note, <i> was on it's way out the door, but it has been given new life in HTML5, so an argument can be made that you can still use it. Personally, I don't.

I suspect that your problem is a combination of item #2 and item #3. If you rework your code to look like this, does it work?

<script type="text/javascript">

function ValidateEmail(email){
if (email.indexOf(' ') >= 0)//The indexOf() method returns the position of the first occurrence of a specified value in a string.
document.getElementById('CheckEmail').innerHTML = 'Email is not valid. Please delete spaces.';
}
</script>

<input onkeyup="ValidateEmail(this.value)" name="email" type="text" id="email"><span id="CheckEmail"></span>


Then in your CSS:

#CheckEmail { color: #f00; font-style: italic; }
9:54 pm on Feb 1, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


</font>

You didn't escape that, so your HTML parser will see that and may close your <script> element. If you make the change I suggested above, that will probably fix it. Alternatively, you need to escape the / in that string as in:
'<font color="#FF0000">Email is not valid. Please delete spaces.<\/font>';
7:16 am on Feb 2, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


Thanks! :) I removed comments, font tags and <i> and all works
7:25 am on Feb 2, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


Only problem is that I must display OK and it must be green
I will try with the /

emailExpression = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(email.match(emailExpression)) {
document.getElementById('CheckEmail').innerHTML = 'OK';
8:09 am on Feb 2, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


One of solutions may be also
document.getElementById('CheckEmail').innerHTML=("Email is not valid. Please delete spaces.").fontcolor("red");
8:22 am on Feb 2, 2013 (gmt 0)

New User

joined:Jan 30, 2013
posts: 33
votes: 0


This
'<font color="#FF0000">Email is not valid. Please delete spaces.<\/font>';
also works

Thank you
4:43 pm on Feb 2, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Solution is to add a child to the node in the DOM and give it a class so you can set colors in your CSS file.
<font> has been made obsolete a very long time ago.
3:00 am on Feb 4, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2003
posts: 1199
votes: 0


Here's the problem: You're using the same term ("email") as both a variable and an ID. Internet Explorer doesn't like that. I've had more than one app that I thought was fine, only to discover that IE choked on it because of this issue.

My modern practice is to use an underscore after all ID's that I'll be accessing with Javascript, e.g.: email_