Magento 1.9 change error placement of validation

Question

I have the below code on my product view page:

<input type="text" class="price required-entry input-text" name="price">
<span class="input-text-price-unit">INR</span>

Since it has require-entry class the default magento validation works fine but the position of the error div shifts the position of my label. Currently on validation failure the structure is:

<input type="text" class="price required-entry input-text validation-failed" name="price">
<div class="validation-advice" id="advice-required-entry-price" style="">This field is required.</div>
<span class="input-text-price-unit">INR</span>

However, I want it as:

<input type="text" class="price required-entry input-text validation-failed" name="price">
<span class="input-text-price-unit">INR</span>
<div class="validation-advice" id="advice-required-entry-price" style="">This field is required.</div>

I want the error div to be after the span.

Thank you.

Answer 1

I have tried this with Magento 1 default theme. You may need to change some CSS as per your theme.

.input-box {
    position: relative !important;
}
.validation-advice {
    background: #DB6D00;
    bottom: -7px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 13px;
    min-height: 13px;
    padding: 10px;
    position: absolute;
    right: -150px;
    width: 120px;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);

}
.validation-advice:after {
    position: absolute;
    left: -8px;
    bottom: 8px;
    content: " ";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #DB6D00;
}

It will look something like:

Most probably, you only need to make changes in .validation-advice class.