Welcome to WebmasterWorld Guest from 54.234.8.146

Forum Moderators: open

Message Too Old, No Replies

email validation does not work in IE7

     

rigaconnect

9:06 pm on Feb 1, 2013 (gmt 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>

rigaconnect

9:38 pm on Feb 1, 2013 (gmt 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>

Fotiman

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

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



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; }

Fotiman

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

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



</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>';

rigaconnect

7:16 am on Feb 2, 2013 (gmt 0)



Thanks! :) I removed comments, font tags and <i> and all works

rigaconnect

7:25 am on Feb 2, 2013 (gmt 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';

rigaconnect

8:09 am on Feb 2, 2013 (gmt 0)



One of solutions may be also
document.getElementById('CheckEmail').innerHTML=("Email is not valid. Please delete spaces.").fontcolor("red");

rigaconnect

8:22 am on Feb 2, 2013 (gmt 0)



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

Thank you

swa66

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

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



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.

MichaelBluejay

3:00 am on Feb 4, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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_
 

Featured Threads

Hot Threads This Week

Hot Threads This Month