Question

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 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:[e-mail]">support</a> to reset your password',
    }
    this.display = function( type ) 
    {
        element.innerHTML = messages[ type ];
        new Effects().fade( element, 'down', 4000 );
    }
};

Answer 1

It 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 🙂