Display javascript validation messages on the screen not alert messages?

Question

I'm using struts1.3.8. I'm using struts ValidatorPlugIn for generating client side and server side validation messages.
Now client side javascript is generated by validator plugin. If there is any validation errors it is displaying in alert messages. But i want to display them besides the text field.
I'm still now working with alert messages only.. But now requirement changed. I tried but no use...
How to do it?
This is the code generated by plugin

`enter code here` function jcv_handleErrors(messages, focusField) {
          if (focusField && focusField != null) {
              var doFocus = true;
              if (focusField.disabled || focusField.type == 'hidden') {
                  doFocus = false;
              }
              if (doFocus && 
                  focusField.style && 
                  focusField.style.visibility &&
                  focusField.style.visibility == 'hidden') {
                  doFocus = false;
              }
              if (doFocus) {
                  focusField.focus();
              }
          }
          alert(messages.join('\n'));
      }

Answer 1

Without specific information, all I can really suggest is a variation of the following:

window.alert = function(message){
    console.log(message);
}

JS Fiddle demo .

Which simply ensures that any messages passed to alert() get passed, instead, to the console.log() .

You could, instead, target the messages to a particular element:

window.alert = function(message) {
    var output = document.getElementById('output'),
        newTextContainer = document.createElement('p'),
        text = document.createTextNode(message);
    newTextContainer.appendChild(text);
    output.appendChild(newTextContainer);
}

JS Fiddle demo .

Using either of these will break any usage of your alert() function in your page, though. So I'd suggest, instead, creating a new function with the latter example (immediately above) and calling that function, rather than over-writing alert() .

With regards to creating a custom function to handle your alerts, as well as specify a particular element to which the new 'alerts' should be appended:

function newAlert(message, elem) {
    // message is a string containing the message to display.
    // elem is the id of the element into which the message should be displayed,
    // defaults to an id of 'output' if no element is specified.
    var output = elem ? document.getElementById(elem) : document.getElementById('output'),
        newTextContainer = document.createElement('p'),
        text = document.createTextNode(message);
    newTextContainer.appendChild(text);
    output.appendChild(newTextContainer);
}

JS Fiddle demo .

---

Edited in response to question from OP, below:

Next again submit the form I want to overwrite the previous error message. Not twice display the same message.

There are a couple of ways of doing this, assuming you only want to show the last of the error messages, rather than appending those error messages; in the first example I'm using a while loop to remove the firstChild of the output element and, when empty, appending the new error message:

function newAlert(message, elem) {
    var output = elem ? document.getElementById(elem) : document.getElementById('output'),
        newTextContainer = document.createElement('p'),
        text = document.createTextNode(message);
    while (output.firstChild){
        output.removeChild(output.firstChild);
    }
    newTextContainer.appendChild(text);
    output.appendChild(newTextContainer);
}

JS Fiddle demo .

An alternative is to get a reference to the first paragraph element in the output element (if one exists, otherwise create one) and then simply overwrite the text in that element:

function newAlert(message, elem) {
    var output = elem ? document.getElementById(elem) : document.getElementById('output'),
        textContainer = output.getElementsByTagName('p')[0] || output.appendChild(document.createElement('p'));

    if (textContainer.firstChild){
        textContainer
            .firstChild
            .nodeValue == message;
    }
    else {
        textContainer
            .appendChild(document
                         .createTextNode(message));
    }
}