Why is my jQuery script for checking required input fields so slow?

Question

I am trying to use jQuery to check for required input fields for browsers that don't reccognise the required HTML tag. My jQuery script is as follow.

$('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();
 });

But it is very slow to load! after I click the submit button for the form, it takes about 5 seconds before the error messahe shows! It seems it is taking some loops. Why is it that? How can I solve this?

Ram · Accepted Answer · 2015-03-28 05:59:09Z

4

The delegated submit handler is not bound directly to the form element so you can't unbind the handler that way. You are creating an infinite loop. You should use the off method and unbind the handler of the div element.

Also note that the returned value of the each callback doesn't affect run flow of the wrapper, submit handler. Each function has it's own returned value.

$('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();
});

The submit method of HTMLFormElement object doesn't trigger jQuery submit handler so there is no need to unbind the handler. If the validation passes the form is submitted normally.

Performance-wise you can also avoid using :input selector. From jQuery :input documentation:

Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").

The elements property of the HTMLFormElement object returns a HTMLFormControlsCollection object in HTML5 browsers and a HTMLCollection object in HTML4 browsers that contains all the controls of the form element. You could also use this property instead of querying the DOM and use the jQuery filter method for filtering required fields:

 $(this.elements).filter('[required]');

edited Mar 28, 2015 at 5:59

answered Mar 28, 2015 at 5:27

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jashwant Over a year ago

Also, :input[required] is very slow selector.

Ram Over a year ago

@Jashwant Yes, good call. If it's still slow, using a faster selector should be considered.

asxelot · Accepted Answer · 2015-03-28 05:10:58Z

1

When you call submit() in last line you create infinite loop.

answered Mar 28, 2015 at 5:10

asxelot

535 bronze badges

Collectives™ on Stack Overflow

Why is my jQuery script for checking required input fields so slow?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related