/    Sign up×
Community /Pin to ProfileBookmark

Validation errors in "popup"

Copy linkTweet thisAlerts:
Aug 27.2010

Hi,

I’m new to JavaScript.

I have a jsp registration form on my page, but I want to improve the display of validation messages. I started with only using server-side validation, but I guess it is more appropriate to place things like null-check, datatype-check etc on the client.

I have downloaded the js source from LiveValidation ([url]http://livevalidation.com/[/url]) and added it to my project. It works fine, but I wold like to display the validation messages in some kind of “popup”. I don’t mean like a standard popup that takes focus from the page, but more similar to a tooltip-ish bubble that is attatched to the respective field when invalid input is entered.

Do you have any suggestions as to how I can achieve this?

Thanks

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@torkolortauthorAug 30.2010 — Any suggestions?
Copy linkTweet thisAlerts:
@savvykmsAug 30.2010 — Here's some functions to help you out:
[code=php]function showmsg(id,msg) {
var n = document.getElementById(id);
if (n) { n.style.display = "block"; n.innerHTML = msg; }
}
function hidemsg(id) {
var n = document.getElementById(id);
if (n) { n.style.display = "none"; n.innerHTML = ""; }
}[/code]

Here's the HTML relevant:
[code=php]
<input type="button" value="Show" onclick="showmsg('someID','Testing')">
<input type="button" value="Hide" onclick="showmsg('someID')">
<div id="someID" style="display: none;"></div>
[/code]
Copy linkTweet thisAlerts:
@sohguanhAug 30.2010 — Here's some functions to help you out:
[code=php]function showmsg(id,msg) {
var n = document.getElementById(id);
if (n) { n.style.display = "block"; n.innerHTML = msg; }
}
function hidemsg(id) {
var n = document.getElementById(id);
if (n) { n.style.display = "none"; n.innerHTML = ""; }
}[/code]

Here's the HTML relevant:
[code=php]
<input type="button" value="Show" onclick="showmsg('someID','Testing')">
<input type="button" value="Hide" onclick="showmsg('someID')">
<div id="someID" style="display: none;"></div>
[/code][/QUOTE]

Above is good if you "stick" a div to each input HTML elements. If you intend to "share" the [b]same div[/b] across various input HTML elements in the page with the capability to input different data into the div, then there is more JS coding to be done. By sharing the same div, we also need to trap the document.mousemove as user can scroll up and down and the co-ordinates for the shared div need to be adjusted accordingly.
×

Success!

Help @torkolort spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...