定制模型验证反馈

发布于 2024-12-06 05:17:16 字数 377 浏览 3 评论 0原文

我想更改在我的 nopCommerce Web 应用程序中向用户显示验证消息的方式。目前，它显示为：

在此处输入图像描述

我想更改它，以便如果登录凭据是不正确，输入字段会出现红色边框，并且文本 [ 错误凭据 ] 将设置为输入字段的占位符。

我尝试禁用代码：

@Html.ValidationSummary(true, T("Account.Login.Unsuccessful").Text)

但这只是带走了所有验证反馈。我怎样才能实现我上面提到的目标？

原文

I want to change the way a validation message appears to the user in my nopCommerce web application. Currently, it appears as so:

enter image description here

I want to change that, so that if and when the login credentials are incorrect, the input fields get a red border, and the text [ wrong credentials ] to be set as Placeholder for the input fields.

I tried disabling the code:

@Html.ValidationSummary(true, T("Account.Login.Unsuccessful").Text)

But that just took away all validation feedback. How can I achieve what I mentioned above?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沉默的熊 2024-12-13 05:17:16

完整更新代码

CSS Jquery 代码

.validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

这是使用 $.ajax 检查登录的

$(function () {
        $('#btnLogin').click(function (e) {
            var email = $('#Email').val(); // this your username textbox value
            var password = $('#Password').val(); // this is your password textbox value
            var postdata = 
            {
                "Email": email,
                "Password": password
            };
            $.ajax({

                tyep: 'POST',
                url: '@Url.Action("LogIN","Account")', // your controller action will be called to check for the login details
                data: postdata, // this data you have to post to controller for validation
                success: function(value) { // if ajax call complete, controller action will return boll value true here 
                     if(valeu) {
                    $('#divLoginError').addClass("validation-error"); // this will add class class to your textboxes with red broder
                    $('divLoginError').html('Please check your username / password');
                     }
                  },
                error: function(errorData) // if any error while calling Ajax. this method is gonna call
                {
                    $('#divLoginError').show().html(errorData);
                }
            });

        });
    });

Here is the complete Updated code

CSS

.validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

Jquery code to check the login using $.ajax

$(function () {
        $('#btnLogin').click(function (e) {
            var email = $('#Email').val(); // this your username textbox value
            var password = $('#Password').val(); // this is your password textbox value
            var postdata = 
            {
                "Email": email,
                "Password": password
            };
            $.ajax({

                tyep: 'POST',
                url: '@Url.Action("LogIN","Account")', // your controller action will be called to check for the login details
                data: postdata, // this data you have to post to controller for validation
                success: function(value) { // if ajax call complete, controller action will return boll value true here 
                     if(valeu) {
                    $('#divLoginError').addClass("validation-error"); // this will add class class to your textboxes with red broder
                    $('divLoginError').html('Please check your username / password');
                     }
                  },
                error: function(errorData) // if any error while calling Ajax. this method is gonna call
                {
                    $('#divLoginError').show().html(errorData);
                }
            });

        });
    });

回复收藏 0 原文

~没有更多了~