JQuery проверка входов перед отправкой с размытием и фокусировкой

Question

У меня есть одна страница с несколькими формами, и я хочу добавить проверку JQUERY или AJAX для каждого ввода из формы. Все входы обязательны. Мне удалось сделать чек, но мне нужно добавить чек foreach, что мне действительно не нравится. Можете ли вы помочь мне сделать эту проверку немного более глобальной? Мне удалось сделать этот код:

$(document).ready(function()
{
    $(document.login.user).blur(function()
    {
        if (document.login.user.value == "")
        {
            document.login.user.style.background = "red";
        }
        else document.login.user.style.background = "white";
    });
    $(document.login.pass).blur(function()
    {
        if (document.login.pass.value == "")
        {
            document.login.pass.style.background = "red";
        }
        else document.login.user.style.background = "white";
    });
});

Можете ли вы сделать так, чтобы он работал глобально ... для проверки каждого входа по отдельности и создания эффекта, который я добавил.

Answer 1

вы можете создать простой плагин, подобный этому:

(function($){
    $.fn.validateEmpty = function(settings) {
        return $(this).each(function(){
            $(this).css({background: $(this).val() == '' ? settings.empty : settings.nonEmpty});
        });
    };
})(jQuery);

, а затем использовать его:

$(document).ready(function(){
    $('#myForm input').blur(function(){
        $(this).validateEmpty({empty: 'red', nonEmpty: 'green'});
    });
});

jsFiddle Demo

Answer 2

Вы можете выбрать все поля ввода, задав общий класс для каждого из них и использовать селектор классов или просто выбрать их по имени тега в форме.Попробуйте это

$(document).ready(function(){
    $("form").find("input, textarea").blur(function(){
        var $this = $(this);
        if($this.val() == ""){
            $this.css("backgroundColor", "red");
        }
        else{
            $this.css("backgroundColor", "white");
        }
    });
});

Answer 3

Мне повезло с плагином Jquery Validate (): http://docs.jquery.com/Plugins/validation. Затем вы просто помечаете каждое поле, которое вы хотите проверить, с помощью "обязательного" класса.Примечание: работает с jquery 1.5.2, а не с 1.6.2 (это избавит вас от боли)

Answer 4

$('form.formclass input').blur(function() {
  if($(this).val() == '') { 
    $(this).css('background-color', 'red');
  } else {
    $(this).css('background-color', 'white');
  }
});

Вам потребуется изменить селектор, хотя он будет представлять поля формы

РЕДАКТИРОВАТЬ

Демо: http://jsfiddle.net/xNsnk/

Answer 5

используйте функцию each () jquery для перебора всех доступных полей ввода.

Я снова знаю, что это цикл типа for, но для меня он более общий с jquery.

Answer 6

Вы должны попробовать плагин, чтобы облегчить вашу проверку.Обычно это хорошее решение: http://docs.jquery.com/Plugins/validation

Answer 7

Вы можете проверить с помощью селектора на всех входных элементах следующее:

$("input").blur( ....etc... )

Или вы можете назначить класс любому элементу, который вы хотите проверить, и проверить любой элемент с этим классом ...

(".className").blur( ....etc.... )