Защо моят jQuery скрипт за проверка на задължителните полета за въвеждане е толкова бавен?

Опитвам се да използвам jQuery, за да проверя за задължителни полета за въвеждане за браузъри, които не разпознават required HTML тага. Моят jQuery скрипт е както следва.

$('div').on('submit', '#myform', function(e){     
    e.stopPropagation();
    e.preventDefault();
    $( ':input[required]').each( function (e) { 
        if ( this.value.trim() == '' ) {
            $('.error').html(this.name + " is required");
            return false;
        }       
    }); 
    $(this).unbind().submit();
 });

Но се зарежда много бавно! след като щракна върху бутона за изпращане за формуляра, отнема около 5 секунди, преди съобщението за грешка да се покаже! Изглежда, че отнема някои цикли. защо е така Как мога да разреша това?


javascript validation jquery each required
person user2335065    schedule 28.03.2015    source източник

Отговори (2)


arrow_upward
4
arrow_downward

Делегираният манипулатор submit не е обвързан директно към елемента на формуляра, така че не можете да развържете манипулатора по този начин. Вие създавате безкраен цикъл. Трябва да използвате метода off и да развържете манипулатора на елемента div.

Също така имайте предвид, че върнатата стойност на обратното извикване each не засяга потока на изпълнение на манипулатора на обвивката, предаване. Всяка функция има своя собствена върната стойност.

$('div').on('submit', '#myform', function(e){     
    var $e = $('.error').empty();
    var $invalids = $(':input[required]').filter( function (e) { 
        var invalid = this.value.trim().length === 0;
        if ( invalid ) {
            $e.append('<p>' + this.name + " is required</p>");
        }
        return invalid;       
    }); 
    if ( $invalids.length ) {
       return false;
    }
    this.submit();
});

Методът submit на HTMLFormElement обект не задейства манипулатора за подаване на jQuery, така че няма нужда да развързвате манипулатора. Ако валидирането премине, формулярът се изпраща нормално.

По отношение на производителността можете също да избегнете използването на селектор :input. От :input документация на jQuery:

Тъй като :input е разширение на jQuery и не е част от CSS спецификацията, заявките, използващи :input, не могат да се възползват от повишаването на производителността, осигурено от собствения DOM querySelectorAll() метод. За да постигнете най-добра производителност, когато използвате :input за избиране на елементи, първо изберете елементите с чист CSS селектор, след което използвайте .filter(":input").

Свойството elements на обекта HTMLFormElement връща HTMLFormControlsCollection обект в HTML5 браузъри и HTMLCollection обект в HTML4 браузъри, който съдържа всички контролите на елемента на формуляра. Можете също така да използвате това свойство, вместо да правите заявки към DOM и да използвате метода jQuery filter за филтриране на required полета:

 $(this.elements).filter('[required]');
person undefined    schedule 28.03.2015
comment
Освен това :input[required] е много бавен селектор. - person Jashwant; 28.03.2015
comment
@Jashwant Да, добро решение. Ако все още е бавен, трябва да се обмисли използването на по-бърз селектор. - person undefined; 28.03.2015

arrow_upward
1
arrow_downward

Когато извикате submit() в последния ред, създавате безкраен цикъл.

person Evgeniy Ryzhkov    schedule 28.03.2015