homepage Welcome to WebmasterWorld Guest from 23.20.77.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
email validation does not work in IE7
rigaconnect




msg:4541585
 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




msg:4541595
 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




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

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




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

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




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

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

rigaconnect




msg:4541687
 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




msg:4541697
 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




msg:4541698
 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




msg:4541786
 4:43 pm on Feb 2, 2013 (gmt 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.

MichaelBluejay




msg:4542170
 3:00 am on Feb 4, 2013 (gmt 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_

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved