How to display validation messages with javascript alert window?

Question

I use LogOn partial view on Index view and use default LogOnModel of MVC3. But, there is not enough place to display validation messages in view. How can I display validation messages with javascript alert window?

[HttpPost]
public ActionResult LogOn( LogOnModel model, string returnUrl )
{
    if ( ModelState.IsValid )
    {
        if ( ( model.UserName != null ) && ( model.Password != null ) )
        {
            if ( Membership.ValidateUser( model.UserName, model.Password ) )
            {
                FormsAuthentication.SetAuthCookie( model.UserName, true );

                if ( Url.IsLocalUrl( returnUrl ) && returnUrl.Length > 1 && returnUrl.StartsWith( "/" )
                    && !returnUrl.StartsWith( "//" ) && !returnUrl.StartsWith( "/\\" ) )
                {
                    return Redirect( returnUrl );
                }
                else
                {
                    return RedirectToAction( "Index", "Home", model );
                }
            }
            else
            {
                return RedirectToAction( "Index", "Home" );
            }
        }
        else return RedirectToAction( "Index", "Home" );
    }
    return RedirectToAction( "Index", "Home" );
}

In Index view:

 @Html.Partial( "LogOn" )

And LogOn view:

@model OnlineMarket.Models.LogOnModel
@using ( Html.BeginForm( "LogOn", "Home", FormMethod.Post ) )
{
    @Html.ValidationSummary( true )
    @Html.Hidden( "RememberMe", "true" )
    <ul class="forms">
        <li class="txt">Username</li>
        <li class="inputfield">
            @Html.TextBoxFor( m => m.UserName, new { @class = "logininputs" } )
        </li>
    </ul>
    <ul class="forms">
        <li class="txt" style="width: 26px;">Password</li>
        <li class="inputfield">
            @Html.TextBoxFor( m => m.Password, new { @class = "logininputs" } )
        </li>
    </ul>
    <ul class="forms">
        <li class="txt" style="width: 50px; margin-top: -5px; margin-left: 4px;">
            <input type="submit" value="Enter" class="buttonforinput" style="height: 23px;" />
        </li>
    </ul>
}

Is there not somebody help me? Any link or sample...

Jeyhun Rahimov
– Jeyhun Rahimov

2012-08-20 06:23:07 +00:00
Commented Aug 20, 2012 at 6:23 — Jeyhun Rahimov
– Jeyhun Rahimov, Commented Aug 20, 2012 at 6:23

Darin Dimitrov · Accepted Answer · 2012-08-20 08:34:04Z

For the unobtrusive client validation you could subscribe to the showErrors callback and display the errors the way you want (alert in your case):

(function ($) {
    $.validator.setDefaults({
        onsubmit: true,
        onkeyup: false,
        onfocusout: false,
        showErrors: function (errorMap, errorList) {
            if (errorList.length > 0) {
                var errors = errorList.map(function (element) {
                    return element.message;
                }).join('\r\n');
                alert(errors);
            }
        }
    });
})(jQuery);

In order to display server side errors with alert on the client you shouldn't be using the @Html.ValidationSummary( true ) helper because this helper outputs the errors directly in the view and you said that you don't have enough place.

So you could emit javascript dynamically when there are errors and display them in an alert:

@if (!ViewData.ModelState.IsValid)
{
    <script type="text/javascript">
        var errors = @Html.Raw(
            Json.Encode(
                string.Join(
                    Environment.NewLine, 
                    ViewData.ModelState
                            .Where(x => x.Value.Errors.Count > 0)
                            .SelectMany(x => x.Value.Errors)
                            .Select(error => error.ErrorMessage))
                )
        );
        alert(errors);
    </script>
}

Collectives™ on Stack Overflow

How to display validation messages with javascript alert window?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related