Отображение сообщения рядом с TextBox с использованием Javascript

Question

У меня есть форма aspx, и в этом мне нужно сделать проверки с использованием jquery или javascript.

Я просто хочу дать сообщение рядом с текстовым полем, если пользователь вводит значение, которое недопустимо в этом текстовом поле. Для отображения сообщения во всплывающем окне [not alert ('message')] *

Как я могу найти положение текстового поля, в котором пользователь вводит недопустимые данные, или как я могу отобразить сообщение рядом с текстовым полем, используя javascript или jquery?

Мне нужно, чтобы проверка происходила в blur.Soпользователю легко узнать, вводил ли он действительные данные сразу после ввода.

Заранее спасибо. Мне не интересно использовать проверку asp.net ajax и его расширитель выноски.
Я простохотите реализовать функциональность, аналогичную той, которую выполняет расширитель выноски валидации.

Answer 1

Вы можете использовать плагин проверки jQuery

• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

Имеет опции для указания сообщения рядом с элементом управления или для указания всего сообщения в одном месте.

Демонстрации доступны на http://docs.jquery.com/Plugins/validation

Answer 2

Вы можете использовать jQuery (ASP.NET) плагин для валидатора

Answer 3

Когда вы связываете событие размытия с текстовым полем, вы знаете, какое это текстовое поле.Просто используйте свой JavaScript обратного вызова для вставки ошибки рядом.

Если вы делаете jquery, это может выглядеть примерно так:

$('.my_textboxes').blur(function() {

var textbox = $(this);

//ajax validation call
$.post('/whereever', {}, function(response) {
    //ajax callback
    if (response == 'error') {
        textbox.next().html(error);   //something like this to insert the error into the next element after the texrbox, eg, a span to hold the error
    }
});`

Answer 4

Как именно вы это сделаете, зависит от макета вашей формы, но в целом вы, вероятно, будете делать что-то вроде этого: если проверка возвращает ошибку для текстового поля, проверьте, существует ли уже «окно ошибки» дляэто поле.Если это так, то просто обновите его содержимое новым сообщением об ошибке;если нет, то добавьте элемент ошибки.

Один из способов сделать это - использовать тег <span> с определенным классом (для макета) и значение "id", полученное из поля ввода"name" или "id":

$.fn.setValidationResult = function(errorMessage) {
  return this.each(function() {
    var errId = 'errMsg_' + this.name, errMsg = $('#' + errId);
    if (!errMsg.length) {
      $(this).after($('<span></span>', { class: 'validation-error', id: errId }));
      errMsg = $('#' + errId);
    }
    if (errorMessage)
      errMsg.html(errorMessage).show();
    else
      errMsg.html('').hide();
  });
});

Тогда вы можете просто использовать $(yourInput).setValidationResult(whatever);, когда "any" будет пустым при прохождении проверки.