473,416 Members | 1,762 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,416 software developers and data experts.

focus after onchange event and regex test not working

Hello. I"m new to this group, and to JavaScript in general, so please
forgive me if I breach local etiquette. I'm trying to implement some
client-side 'dynamic' validation on a form. I'm having a couple of
problems, which I'll try to describe. But this e-mail will only
reproduce one of them, in a "short" example. What I'm generally doing
is having each form entry contained in a div, which as a label, an
input with some event handlers, and a span that provides contextual
help. Example:

<div class="form_entry">
<label>Username:</label>
<input name="uname" id="uname" type="text" onfocus="focus_event"
onblur="blur_event"
onchange="verify_new_username()" />
<span id="uname_help"></span>
</div>

The focus_event and blur_event functions are taken out for brevity.
That may be addressed in another email; they just hide and un-hide
default text in the span.

The specific problem I'm asking about here involves focusing and
altering innerHTML after a regex check, apparently with an onchange
handler. The code example will follow at the end of the message. But
what I would like to happen is, the person enters and e-mail address.
After entering the first e-mail address, the onchange event handler
calls a function that runs a basic regex against the email to see if it
fits some basic parameters. If the test fails, I would like to change
the span for that entry, then keep focus there until the e-mail
validates. The problem is that the focus won't stay there.

Here are some things I've figured out with tinkering. If I change the
event handler to onblur instead of onchange, it works with IE, but not
Firefox. But it needs to be onchange because onblur is already being
used to hide the <span /> help text when the user moves focus. Also,
if I change innerHTML and focus calls to a separate function, then use
setTimeout('other_function', 0), then the focus works in both Firefox
and IE, but the innerHTML doesn't change in IE. Also, and this code
will be included, all of this works when all I do is test 2 values for
equality, for instance with passwords. It seems to be the regex check
that screws things up.

If ANYONE can assist me with this, I'd be very much obliged. Of
course, I have bigger problems, particularly as far as incorporating
this into the big form and the onfocus/onblur events, but first things
first.

Here's the code for e-mail validatoin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Form Entry Test</title>
<style type="text/css">
div.form_entry {
padding: 5px 0px;
vertical-align: top;
}
div.form_entry label {
font-size: .95em;
float: left;
width: 112px;
margin: 0 5px 0 0;
text-align: right;
}
.no_display {
display: none;
}
.show_usage {
background-color: #FFFAB2;
color: #0000FF;
font-family: Verdana, Helvetica, sans-serif;
font-size: .75em;
padding: 2px 1px;
}
</style>
<script type="text/javascript">
function switch_back_to_email1()
{
var email_help = document.getElementById('email1_help');

document.forms["acct_form"].mb_email1.value = '';
document.forms["acct_form"].mb_email1.focus();
email_help.className = 'show_usage';
email_help.innerHTML = 'Invalid e-mail address';
}

function is_email_valid(this_email)
{
var new_acct_form = this_email.form;
// really basic test...
var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/;

var email_help = document.getElementById('email1_help');

if (!reMail.test(this_email.value)) {
// this setTimeout works for focusing in both IE/Firefox. But IE won't
// change the innerHTML
// setTimeout('switch_back_to_email1()', 0);
new_acct_form.mb_email1.focus();
email_help.innerHTML = 'Invalid e-mail address';
email_help.className = 'show_usage';
return false;
}
return true;
}

function verify_email(this_email)
{
var new_acct_form = this_email.form;
var email1 = acct_form.mb_email1.value;
var email2 = acct_form.mb_email2.value;

if (email1 != email2) {
var email_help = document.getElementById('email1_help');

new_acct_form.mb_email1.focus();
new_acct_form.mb_email2.value = '';
email_help.innerHTML = 'The emails are <strong>'+
'not equal<' +
'/strong>.';
email_help.className = 'show_usage';
return false;
}
}
</script>
</head>
<body>
<form id="acct_form" name="acct_form"
method="post" action="#"
onsubmit="return validate_new_account(this)">

<div class="form_entry">
<label>Username: </label>
<input name="mb_uname" id="mb_uname_new" maxlength="25"
size="15" value="" type="text"
onchange="verify_new_username()" />
<span id="uname_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<label>E-mail: </label>
<input name="mb_email1" id="mb_email1" maxlength="50" size="25"
type="text"
onchange="is_email_valid(this)" />
<span id="email1_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<label>E-mail: </label>
<input name="mb_email2" id="mb_email2" maxlength="50" size="25"
type="text"
onchange="verify_email(this)" />
<span id="email2_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<input type="submit" name="action" value="Create" />
</div>
</form>

----------------------------------------------------------------------

And here's the code for an example that works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Form Entry Test</title>
<style type="text/css">
div.form_entry {
padding: 5px 0px;
vertical-align: top;
}
div.form_entry label {
font-size: .95em;
float: left;
width: 112px;
margin: 0 5px 0 0;
text-align: right;
}
.no_display {
display: none;
}
.show_usage {
background-color: #FFFAB2;
color: #0000FF;
font-family: Verdana, Helvetica, sans-serif;
font-size: .75em;
padding: 2px 1px;
}
</style>
<script type="text/javascript">
function verify_passwords(pass_field)
{
var new_acct_form = pass_field.form;
var pass1_help = document.getElementById('upass1_help');
var pass1 = MothForm.mb_upass1.value;
var pass2 = MothForm.mb_upass2.value;

if (pass1 != pass2) {
new_acct_form.mb_upass1.value = '';
new_acct_form.mb_upass2.value = '';
new_acct_form.mb_upass1.focus();
upass1_help.innerHTML = 'The passwords are '+
'<strong>not
equal<'+'/strong>.';
upass1_help.className = 'show_usage';
}
}

</script>
</head>
<body>
<form id="acct_form" name="acct_form"
method="post" action="#"
onsubmit="return validate_new_account(this)">

<div class="form_entry">
<label>Username: </label>
<input name="mb_uname" id="mb_uname_new" maxlength="25"
size="15" value="" type="text"
onchange="verify_new_username()" />
<span id="uname_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<label>Password: </label>
<input name="mb_upass1" id="mb_upass1" maxlength="25" size="15"
value="" type="password" />
<span id="upass1_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<label>Password: </label>
<input name="mb_upass2" id="mb_upass2" maxlength="25" size="15"
type="password"
onchange="verify_passwords(this)" />
<span id="upass2_help" class="no_display">&nbsp;</span>
</div>
<div class="form_entry">
<input type="submit" name="action" value="Create" />
</div>
</form>

-------------------------------------------------------------------

I know that code is going to look like crap, but I did what I could to
try to make it work.

Thanks!
jab3

Feb 28 '06 #1
3 3948
jab3 wrote:
Hello. I"m new to this group, and to JavaScript in general, so please
forgive me if I breach local etiquette. I'm trying to implement some
client-side 'dynamic' validation on a form. I'm having a couple of
problems, which I'll try to describe. But this e-mail will only
reproduce one of them, in a "short" example. What I'm generally doing
is having each form entry contained in a div, which as a label, an
input with some event handlers, and a span that provides contextual
help. Example:

<div class="form_entry">
<label>Username:</label>
<input name="uname" id="uname" type="text" onfocus="focus_event"
onblur="blur_event"
onchange="verify_new_username()" />
<span id="uname_help"></span>
</div>

The focus_event and blur_event functions are taken out for brevity.
That may be addressed in another email; they just hide and un-hide
default text in the span.

The specific problem I'm asking about here involves focusing and
altering innerHTML after a regex check, apparently with an onchange
handler. The code example will follow at the end of the message. But
what I would like to happen is, the person enters and e-mail address.
After entering the first e-mail address, the onchange event handler
calls a function that runs a basic regex against the email to see if it
fits some basic parameters. If the test fails, I would like to change
the span for that entry, then keep focus there until the e-mail
validates.
No, don't. Do not trap the user in a field until they 'get it right',
that kind of behaviour drives users bezerk.

It might be that your regular expression is not appropriate for their
e-mail address, or they may have partially completed the field and gone
off do to something else (like check what their e-mail address is).
Further, the fact that the e-mail address fits your regular expression
does not make it valid. And if the user turns off scripting you can't
validate anything at the client, they can enter whatever they like.

By all means provide a helpful message onchange if you think the address
is wrong, but that's it.

You should deal with it at the server - send a confirmation e-mail to
the supplied address. If it bounces or they don't respond within say 48
hrs, scratch them.

The problem is that the focus won't stay there.
I wouldn't call that a problem, I'd say it's a bonus. :-)

Here are some things I've figured out with tinkering. If I change the
event handler to onblur instead of onchange, it works with IE, but not
Firefox. But it needs to be onchange because onblur is already being
used to hide the <span /> help text when the user moves focus. Also,


You can call more than one function from the same event.

<input onblur="func01(); func02(); ..." ...>

[...]
--
Rob
Feb 28 '06 #2
RobG wrote:
jab3 wrote:

[ some snipped ]

After entering the first e-mail address, the onchange event handler
calls a function that runs a basic regex against the email to see if it
fits some basic parameters. If the test fails, I would like to change
the span for that entry, then keep focus there until the e-mail
validates.
No, don't. Do not trap the user in a field until they 'get it right',
that kind of behaviour drives users bezerk.


That's funny. As I was typing that message out and got to that
sentence, I started thinking about it. And I started realizing holding
a user in a field could turn into a bad thing. But, I decided I still
wanted to find out what I was doing wrong to keep it from re-focusing,
so I left it as is. :)
It might be that your regular expression is not appropriate for their
e-mail address, or they may have partially completed the field and gone
off do to something else (like check what their e-mail address is).
Further, the fact that the e-mail address fits your regular expression
does not make it valid. And if the user turns off scripting you can't
validate anything at the client, they can enter whatever they like.

By all means provide a helpful message onchange if you think the address
is wrong, but that's it.
I agree, and I was always planning on doing validation on the
server-side too, just because 'bad' people could submit information
outside of the form period. But I do like the idea of some dynamic
validation on the client's machine to cut down on server/client
communication. I am going to reassess this e-mail validation lock,
however. Like the comment in the code says, the validation is basic,
which is why I ask for the email again, and then I may send a response
for verification. Who knows. I do like the idea of setting a simple
message that suggests the email is invalid. At least let 'em know I'm
on to 'em. haha
You should deal with it at the server - send a confirmation e-mail to
the supplied address. If it bounces or they don't respond within say 48
hrs, scratch them.

The problem is that the focus won't stay there.


I wouldn't call that a problem, I'd say it's a bonus. :-)


HA. Yeah, you're probably right.

Here are some things I've figured out with tinkering. If I change the
event handler to onblur instead of onchange, it works with IE, but not
Firefox. But it needs to be onchange because onblur is already being
used to hide the <span /> help text when the user moves focus. Also,


You can call more than one function from the same event.

<input onblur="func01(); func02(); ..." ...>


Now that I did not know. That's helpful, and obvious enough I suppose.
:) Just didn't want to confuse the bubbling or propagating or
whatever.

Anyway, thanks for the help and advice!

-jab3

Feb 28 '06 #3
jab3 wrote:
RobG wrote:
jab3 wrote: [...]By all means provide a helpful message onchange if you think the address
is wrong, but that's it.

I agree, and I was always planning on doing validation on the
server-side too, just because 'bad' people could submit information
outside of the form period. But I do like the idea of some dynamic
validation on the client's machine to cut down on server/client
communication. I am going to reassess this e-mail validation lock,
however. Like the comment in the code says, the validation is basic,
which is why I ask for the email again, and then I may send a response
for verification. Who knows. I do like the idea of setting a simple
message that suggests the email is invalid. At least let 'em know I'm
on to 'em. haha


Make sure the message lets them know what you consider valid. The usual
idea is to have on-screen help that unobtrusively suggests a format
wherever validation is to be applied. It should be in the HTML and its
visibility should not be script-dependent (though you might use script
to highlight it if validation fails).

[...]
--
Rob
Feb 28 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: fish | last post by:
Hi, I have an HTML page with a FORM and some input fields. On the fields I wish to do validation as the punters change the field values. If they get it wrong, then I tell them and then wish...
3
by: jkstinn | last post by:
I apologize for another post about focus, but whatever I try just doesn't seem to work. I appreciate any ideas that you could give me on getting the focus back to the textbox after tabbing or...
1
by: ra | last post by:
Hi I can't figure this out - I have a routine that is triggered after a text field is changed and if an error it displays an alert message and should put focus back to the field in error but...
1
by: SimonFx | last post by:
Am I right in assuming that you can NOT set focus() back to a field in its onChange event? Is there another way - I have validation that I would like to set the focus back to the invalid field...
6
by: MickG | last post by:
Hi, I am trying to validate these values, this seems to work fine for the phone number and name but I am trying to get the program to fail to submit and set the focus on the date when 2006 is...
5
by: tshad | last post by:
I have a date validation function that I want to stay at the object I am validating if there is a Validation error, but it always goes to the next object. The Javascript: function...
8
by: Yeah | last post by:
I wish to use a drop box where each Option will not take the user to a web page - but a certain location on the same page the drop box exists. For example, Option 1 would take the user to "Chapter...
7
by: Peter | last post by:
Does anyone know how to trap SelectedIndexChanged event on the client side for the following control? http://www.metabuilders.com/Tools/ComboBox.aspx I have tried...
2
by: pendragn | last post by:
I've come across a problem I just can't solve. I have an text element I need to evaluate on change. All I need to do is open a confirm dialog asking if they'd like to save the change, if yes, I...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.