CODEWITHSUNDEEP
cssmodel-view-controllervalidation
Grofit
Grofit

Reputation: 18445

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!

Upvotes: 1

Views: 1655

Answers (1)

Rob
Rob

Reputation: 10248

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;
}

My background image - your welcome to use it

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 :-)

Upvotes: 3

Related Questions