Q:

MVC ClientSideValidation using Inline Style?

Got a simple form, and I am using the data annotations and model to give automatic clientside validation. However it looks fairly rubbish, and although I can apply some CSS to the elements im finding it quite difficult to get them to display as tooltip style errors.
Ideally im after something like: http://www.position-relative.net/creation/formValidator/demoValidators.html
However it seems like all these sort of implementations require new DOM elements to be added during the validation and then displayed, however by default we only have the single element that contains the validation message.
I was mainly wondering if there was any pre-made Jquery plugin or MVC compatible project that would allow me to do this style of validation with little effort, as im a coder not a designer.
If there is no simple way to do this then no worries, and thanks for any advice!

A:

I have validation similar to the demo URL that uses MVC validation  and css - it's not too difficult to do - my CSS looks like this:
.field-validation-error
{
    background:url('/Styles/icons/validation-box-medium.gif') no-repeat;
    padding:10px 4px 4px 28px;
    width:188px;
    height:20px;
    position:absolute;
    z-index:1;
    clear:both;
    color:#780701;
}

And my view code looks like:
            <div>
                <div class="editor-label">
                    <%: Html.LabelRequiredFor(model => model.Product.Price)%>
                </div>
                <div class="editor-field">
                    <%: Html.TextBoxTwoDecimalFor(model => model.Product.Price)%>
                    <div style="clear:both;"></div>
                    <%= Html.ValidationMessageFor(model => model.Product.Price)%>
                </div>
            </div>

I have a CSS class for the "clear:both" i.e. I never us inline styles - but for the sake of the example I have omitted that.
You're welcome to use some or all of the contents of this post including the image :-)

