JQuery форму BASIC вопрос проверки - PullRequest
Новая
       4

JQuery форму BASIC вопрос проверки

0 голосов
/ 07 декабря 2009

Я пытаюсь проверить форму в том, что если в поле ввода нет текста, появляется значок ошибки ... и если НИЧЕГО есть на входе, появляется значок успеха. Истинные методы проверки не используются. Вы можете увидеть форму здесь .

Как вы можете видеть, когда вы вводите что-то в первое поле и нажимаете вкладку, значок всплывает правильно, но он не будет работать ни в одном из полей после первого. Вот мой JQuery: 

<script type="text/javascript">
        $(function(){
        var field = document.getElementById('myFormField');
        var icon = document.getElementById('myIcon');

        field.onchange = function(){
            icon.src = this.value ? 'success.png' : 'fail.png';
        };
        });
</script>

Я не знаю, как заставить это работать на всех полях ввода, но я уверен, что это простое исправление. Мой HTML настроен так: 

<input type="text" class="name" name="name" tabindex="1" id="myFormField"  /><img id="myIcon" />

id myFormfield вызывает значок, а класс "name" запускает фон при нажатии. Я предполагал, что должен придерживаться класса и попытаться использовать его как часть этого решения. Есть идеи?

Ответы [ 4 ]

5 голосов
/ 07 декабря 2009

Вы не используете мощь jQuery. Попробуйте что-то вроде этого: 

$(function(){
    $(':text,:textarea').bind('change, blur',function(){
        $(this).next('img').attr('src',this.value ? 'success.png' : 'fail.png');
    });
});
4 голосов
/ 07 декабря 2009

Вы, похоже, только начинаете с jQuery. Ну, как только вы пройдете первую часть кривой обучения, приготовьтесь к тому, что ваш ум будет взорван! Одна из самых мощных функций jQuery - возможность выбирать элементы в вашем документе с помощью селекторов CSS. 

allinputs = $("input"); // Selects all input elements in your DOM
allrequiredinputs = $("input.required"); //Selects all input elements with a class of "required" in your DOM
allrequireds = $(".required"); //Selects all elements regardless of the tag name that have a class of "required"

В этой теме есть и другие ответы, которые отлично отвечают на ваш вопрос, поэтому я не буду пытаться дублировать их здесь. Тем не менее, у меня есть предложение, которое может работать лучше для вас. Вместо загрузки другого изображения в DOM при изменении состояния формы, почему бы не использовать спрайт с состояниями «хорошо», «не хорошо» и «пусто» и просто обновить класс элемента проверки при изменении поля ввода , Таким образом, все возможные состояния вашего элемента проверки предварительно загружены, поэтому обратная связь происходит мгновенно, а не через секунду или около того, требуется загрузка изображения.

Чтобы узнать больше о спрайтах, прочитайте их:

Тогда вы могли бы сделать что-то вроде этого:

// CSS 

.validation {
display: block;
float: left;
width: 10px;
height: 10px;
}
.validation.blank {
background: none;
}
.validation.good {
background: url(mysprite.gif) 0px 0px;
}
.validation.nogood {
background: url(mysprite.gif) 0px 10px;
}

// HTML 

<form id="myForm" ... >
    <div id="contactform_namerow">
        <label for="name">Name</label><input type="text" id="name" name="name" />
        <div class="validation"></div>
    </div>
</form>

// JQuery 

$(function(){
    $('#myform input, #myform textarea').bind('change',function(){
        if($(this).val == ""){
            $(this).siblings(".validation").addClass("nogood").removeClass("good");
        } else {
            $(this).siblings(".validation").addClass("good").removeClass("nogood");
        }
    });
});

Вы можете дополнительно оптимизировать это, указав имена классов, обозначающие, как каждое поле должно проверяться для каждого входного элемента. Таким образом, вы можете написать некоторый код, который будет проверять адреса электронной почты, установив что-то вроде <input type="text" id="myemail" name="email" class="email"> и выбрав все такие элементы в jQuery, выполнив $('input.email')... Кроме того, я уверен, что где-то есть функция toggleClass, но мне было лень посмотрите.

Но ... замечательная вещь в jQuery - ОГРОМНОЕ количество доступных плагинов. Это мой личный фаворит: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Как только вы научитесь правильно использовать плагин, я уверен, вы обнаружите, что он будет делать все, что вы хотите, чтобы получить его здесь и даже больше!

Надеюсь, это поможет и удачи!

Иэн

0 голосов
/ 07 декабря 2009

хорошо, вы используете jquery, но не используете jquery. Вы, вероятно, должны иметь что-то вроде 

$("input").bind('blur', function(){
    if ($(this).val() == ''){
        $(this).siblings('.icon').attr('src', 'fail.png');
    }
    else{
         $(this).siblings('.icon').attr('src', 'success.png');
    }
}

поместите это в ваш $ (function () {}); блок.

он проверяет, является ли текст пустым, когда ввод теряет фокус, а затем устанавливает его родного брата (который имеет class = 'icon' для успеха или неудачи.

0 голосов
/ 07 декабря 2009

Если вы используете jQuery, самый простой способ будет: 

$('input').change( function() {
  icon.src = $(this).val() ? 'success.png' : 'fail.png';
});

Вы можете заменить $('input') более конкретным селектором, таким как $('input[type="text"]').

...