I have this object below:
I thought about putting the messages in html like this
<div id = "text_identifier">text_here</div> // div is hidden.
and then using getElementById to pull the message into JavaScript and finally display to the user in the correct element ( the parameter element in Message )
Two related questions?
Is it bad practice to have content in JavaScript like this?
If I do move the messages into the HTML, is the method I described above best practice?
/**
*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 plete 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:[email protected]">support</a> to reset your password',
}
this.display = function( type )
{
element.innerHTML = messages[ type ];
new Effects().fade( element, 'down', 4000 );
}
};
I have this object below:
I thought about putting the messages in html like this
<div id = "text_identifier">text_here</div> // div is hidden.
and then using getElementById to pull the message into JavaScript and finally display to the user in the correct element ( the parameter element in Message )
Two related questions?
Is it bad practice to have content in JavaScript like this?
If I do move the messages into the HTML, is the method I described above best practice?
/**
*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 plete 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:[email protected]">support</a> to reset your password',
}
this.display = function( type )
{
element.innerHTML = messages[ type ];
new Effects().fade( element, 'down', 4000 );
}
};
3 Answers
Reset to default 1It depends how you like to do that. Often JavaScript isn't the important thing, it is the php backend part. So integrate it how it is easy readable in your system. :)
I would use the HTML data-* Attribute for each element.
if you got many inputs you can make it like that:
<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 are selecting the values, you can also select the error messages :)
I'm sure you know how to use javascript based on what you said thus far, in practice the method you are using is absolutely fine, and should not cause you any harm, I have added a link just incase you need a reference
http://www.javascripttoolbox./bestpractices/
I think it's really a preference thing. You could have it in the HTML and only show a div with a particular class (i.e. a div that says "Sorry, that email is taken" has the class .taken and you show that div when that error triggers).
There may be arguments about performance one way or the other, but I see them as pretty insignificant on this scale, and if anything your method may be slightly better. It gives you one unified place to edit messages, and a simple clean way of calling those messages to the front.
So really, a matter of opinion/preference.