Home How to animate modelvalidation in MVC with Javascript?
Reply: 0

How to animate modelvalidation in MVC with Javascript?

user46301
1#
user46301 Published in September 20, 2018, 4:35 pm

I´m new here. please be patient with me :)

An open question, if I´m using asp.net MVC model validation. Can I get my @html.ValidationMessageFor to use javascript effects on display when my controller action returns the error message?

CSS i an option, but my question targets javascript on model validation specifically.

I´m aware of unobtrusive javascript and validate.js.

sample code from my view:

@using (Html.BeginForm("Create","Account", FormMethod.Post, new { data_ajax = "false" }))
{
<fieldset>
    @Html.ValidationMessageFor(model => model.email)
    <div class="form-group has-feedback">
        @Html.TextBoxFor(model => model.email, new {@type="email", @class ="form-control", @placeholder="E-post", @required="required"})
        <i class="form-control-feedback fa fa-envelope" aria-hidden="true"></i>
    </div>

And my model validationattribute looks like this:

public class general_customerMetaData
{
    [CreateAccountValidation("isEmailAvailable", "Account", ErrorMessage = "E-postadressen används redan!")]
    public string email { get; set; }
    public string password { get; set; }
    [System.ComponentModel.DataAnnotations.Compare("password", ErrorMessage = "Lösenorden matchar inte")]
    public string passwordValidation { get; set; }
}

My error message gets displayed, but I don't know how to use javascript effects when passing result from the controller to view.

I appreciate all your help and tips.

Thanks in advance people!

share|improve this question
  • Generally you do not need any JavaScript for animation. Subtle effects are best achieved with CSS transition while more complicated animations are done with CSS3 @keyframe-animations. You may need JavaScript to trigger the animations (such as adding or removing class-names for transition) but that's generally it - unless you really need to target Internet Explorer 7 for some reason. – Dai Feb 14 at 10:41
  • Error messages have the class="field-validation-error" so you could always hide then when the page is first loaded, and then animate the (e.g. $('.field-validation-error').hide().fadeIn('slow');) – Stephen Muecke Feb 14 at 22:04
  • @Dai thank you for your reply. – Bash Feb 15 at 15:05
  • @StephenMuecke okey will try, i will come back when tested :) – Bash Feb 15 at 15:07

active oldest votes

Your Answer

StackExchange.ifUsing("editor", function () { StackExchange.using("externalEditor", function () { StackExchange.using("snippets", function () { StackExchange.snippets.init(); }); }); }, "code-snippets"); StackExchange.ready(function() { var channelOptions = { tags: "".split(" "), id: "1" }; initTagRenderer("".split(" "), "".split(" "), channelOptions); StackExchange.using("externalEditor", function() { // Have to fire editor after snippets, if snippets enabled if (StackExchange.settings.snippets.snippetsEnabled) { StackExchange.using("snippets", function() { createEditor(); }); } else { createEditor(); } }); function createEditor() { StackExchange.prepareEditor({ heartbeatType: 'answer', convertImagesToLinks: true, noModals: false, showLowRepImageUploadWarning: true, reputationToPostImages: 10, bindNavPrevention: true, postfix: "", onDemand: true, discardSelector: ".discard-answer" ,immediatelyShowMarkdownHelp:true }); } });
 
StackExchange.ready( function () { StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48783327%2fhow-to-animate-modelvalidation-in-mvc-with-javascript%23new-answer', 'question_page'); } );

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged javascript asp.net-mvc validation controller or ask your own question.

StackExchange.ready(function(){$.get('/posts/48783327/ivc/af20');});
StackExchange.ready(function () { StackExchange.responsiveness.addSwitcher(); }) (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); StackExchange.ready(function () { StackExchange.ga.init({ sendTitles: true, tracker: window.ga, trackingCodes: [ 'UA-108242619-1' ] }); StackExchange.ga.setDimension('dimension2', '|javascript|asp.net-mvc|validation|controller|'); StackExchange.ga.setDimension('dimension3', 'Questions/Show'); StackExchange.ga.trackPageView(); }); /**/ var _qevents = _qevents || [], _comscore = _comscore || []; (function() { var ssl = 'https:' == document.location.protocol, s = document.getElementsByTagName('script')[0], qc = document.createElement('script'); qc.async = true; qc.src = (ssl ? 'https://secure' : 'http://edge') + '.quantserve.com/quant.js'; s.parentNode.insertBefore(qc, s); _qevents.push({ qacct: "p-c1rF4kxgLUzNc" }); /**/ var sc = document.createElement('script'); sc.async = true; sc.src = (ssl ? 'https://sb' : 'http://b') + '.scorecardresearch.com/beacon.js'; s.parentNode.insertBefore(sc, s); _comscore.push({ c1: "2", c2: "17440561" }); })();
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.320767 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO