0

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.

0

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:

error message position

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.