На вкладке нажмите выбросить ошибку, если текстовое поле пустое

#javascript #jquery #asp.net-mvc-3

#javascript #jquery #asp.net-mvc-3

Вопрос:

У меня есть экран регистрации, на котором есть имя пользователя, пароль, код подтверждения, идентификатор электронной почты и т. Д.,. Мне нужно выполнить проверку в jquery. Проверка заключается в том, что если нажать Tab без ввода какого-либо значения в текстовом поле имени пользователя, оно выдает сообщение об ошибке или некоторую информацию пользователю, говорящую, что имя пользователя не должно быть пустым. Я новичок в jquery, выполнил пару проверок, но он работает некорректно. Есть предложения? Это на странице MVC cshtml.

Страница MVC cshtml

 @Html.TextBoxFor(m => m.Referenence_Cd, new Dictionary<string, object> { { "id", "TxtReferenence_Cd" }, { "name", "Referenence_Cd" }, { "Class", "textBoxPlacHold" }, { "spellCheck", false }, { "maxLength", "13" } })
@Html.TextBoxFor(m => m.Authentication_Cd, new Dictionary<string, object> {{ "id", "TxtAuthentication_Cd" }, { "name", "Authentication_Cd" }, { "Class", "textBoxPlacHold" } ,{"spellCheck",false}, { "maxLength", "12" }})
@Html.TextBoxFor(m => m.Login_Id, new Dictionary<string, object> {{ "id", "Txtlogin" }, { "name", "Login_Id" }, { "Class", "textBoxPlacHold" }, { "jsValidation", "checkEMailAddr" } })
@Html.PasswordFor(m => m.Password, new Dictionary<string, object> {{ "id", "txtPassword" }, { "name", "Password" }, { "Class", "textBoxPlacHold txtPassword" } })

Jquery: 
$('#TxtReferenence_Cd').blur(function () {
        if ($('#TxtReferenence_Cd').val() == "") {
            $('#spnVerificationErr').show();
            $('#spnVerificationErr').html("Reference number should not be empty!");
        }
        else{         
            $('#spnVerificationErr').hide();
            $('#spnVerificationErr').html("");
  

При нажатии кнопки tab необходимо отобразить сообщение о проверке, если я нажимаю tab без ввода какого-либо значения, оно должно показывать номер ссылки, который не должен быть пустым

Комментарии:

1. просто проверьте с blur событием

2. Ok. проверим с помощью blur

Ответ №1:

 $(document).on('keydown', 'input', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // show the message here
  } 
});
  

Обновить:

вы должны иметь возможность реализовать это в своем собственном коде, но в любом случае:

 Jquery: 
$(document).on('keydown','#TxtReferenence_Cd',function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
        if ($(this).val() == "") {
            e.preventDefault();
            $('#spnVerificationErr').show();
            $('#spnVerificationErr').html("Reference number should not be empty!");
        }
        else{         
            $('#spnVerificationErr').hide();
            $('#spnVerificationErr').html("");
            }
        }
});
  

Комментарии:

1. привет, я отредактировал вопрос, можете ли вы, пожалуйста, изучить это .. и предоставить свое предложение

2. вы бы приняли ответ, если это действительно то, что вам нужно?

3. отлично, рад, что это помогло 😉

Ответ №2:

Я сам понял ответ.. Размещено здесь для других, кому это поможет,

  $('#TxtReferenence_Cd').blur(function () {
            if ($('#TxtReferenence_Cd').val() == '') {
                $('#TxtReferenence_Cd').addClass('outLineRed');
                $('#spnVerificationErr').show();
                $('#spnVerificationErr').html("Reference number should not empty!");
                $('#MsgSucc').attr("style", "background-color:White;");
                $("html, body").animate({ scrollTop: 0 }, "slow");
                return false;

            }
            else {
                $('#spnVerificationErr').hide();
                $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
                $('#TxtReferenence_Cd').removeClass('outLineRed');
            }
        }
            );

    $('#Authentication_Cd').blur(function () {
            if ($('#Authentication_Cd').val() == '') {
                $('#Authentication_Cd').addClass('outLineRed');
                $('#spnVerificationErr').show();
                $('#spnVerificationErr').html("Reference number should not empty!");
                $('#MsgSucc').attr("style", "background-color:White;");
                $("html, body").animate({ scrollTop: 0 }, "slow");
                return false;

            }
            else {
                $('#spnVerificationErr').hide();
                $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
                $('#Authentication_Cd').removeClass('outLineRed');
            }
        }
            );


        $('#Txtlogin').blur(function () {

            if ($('#Txtlogin').val() == '') {
                $('#Txtlogin').addClass('outLineRed');
                $('#spnVerificationErr').show();
                $('#spnVerificationErr').html("Email address should not be empty!");
                $('#MsgSucc').attr("style", "background-color:White;");
                $("html, body").animate({ scrollTop: 0 }, "slow");
                return false;

            }
            else {
                $('#spnVerificationErr').hide();
                $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
                $('#Txtlogin').removeClass('outLineRed');

            }

        }
            );


        $('#txtPassword').blur(function () {
            if ($('#txtPassword').val() == '') {
                $('#txtPassword').addClass('outLineRed');
                            $('#spnVerificationErr').show();
                            $('#spnVerificationErr').html("Password should not be empty!");
                            $('#MsgSucc').attr("style", "background-color:White;");
                            $("html, body").animate({ scrollTop: 0 }, "slow");

                return false;

            }
            else {
                $('#spnVerificationErr').hide();
                $('#MsgSucc').attr("style", "background-color:#dfe5e6;");
                $('#txtPassword').removeClass('outLineRed');
            }

        }
        );