User error messages | HTML and JavaScript data
I have this object below:
I was thinking about posting messages in html like this
<div id = "text_identifier">text_here</div> // div is hidden.
and then use getElementById to display the message in JavaScript and finally display to the user in the correct element (parameter element in Message
)
Two related questions?
Is there really content in JavaScript for bad practice?
If I move posts to HTML, is this the method I described above, is it better?
/**
*Message
*/
var Message = function( element )
{
var messages =
{
name: 'Please enter a valid name',
email: 'Please enter a valid email',
pass: 'Please enter passoword, 6-40 characters',
url: 'Please enter a valid url',
title: 'Please enter a valid title',
tweet: 'Please enter a valid tweet',
empty: 'Please complete all fields',
email_s: 'Please enter a valid email.',
same: 'Please make emails equal',
taken: 'Sorry, that email is taken',
validate: 'Please contact <a class="d" href="mailto:guy@host.com">support</a> to reset your password',
}
this.display = function( type )
{
element.innerHTML = messages[ type ];
new Effects().fade( element, 'down', 4000 );
}
};
It depends on how you like to do it. Often JavaScript is not an important thing, it is part of the php backend. So integrate it as it is easy to read on your system. :)
I would use the HTML attribute data-*
for each element.
If you have a lot of inputs, you can do it like this:
<input type="text" name="name" data-error-message="Please enter a valid name">
<input type="text" name="email" data-error-message="Please enter a valid email">
<input type="text" name="pass" data-error-message="Please enter passoword, 6-40 character">
and when you select values you can also select error messages :)
source to share
I think this is really a preference. You could have it in HTML and only show a div with a specific class (i.e. the Div that says "Sorry this email has been received" has a class .taken and you show that div when this error is triggered) ...
There may be performance arguments one way or another, but I find them pretty minor on this scale, and if anything, your method might be slightly better. This gives you a single place to edit posts and an easy, simple way to bring those posts to the front.
So it's really a matter of opinion / preference.
source to share