How to validate if textbox value is empty in a series of textboxes?

Question

There are a series of textboxes like:

 <input  type="text" class="jq-textBox" />
 <input  type="text" class="jq-textBox" />
 <input  type="text" class="jq-textBox" />
 <input  type="text" class="jq-textBox" />
 <input  type="text" class="jq-textBox" />

User can fill up the textbox values from top to bottom order. Only first textbox is required and all other textboxes are optional.

Allowed order to fill textbox values:

1st
1st & 2nd
1st, 2nd & 3rd
and likewise in sequence order

Dis-allowed order:

2nd
1st & 3rd
1st, 2nd & 4th    

This means that user needs to fill up the first textbox only or can fill up the other textboxes in sequential order. User can NOT skip one textbox and then fillup the next one.

How to validate this in javascript/jQuery?

Any help is highly appreciated!

Answer 1

I would personaly use the disabled html attribute.
See this jsFiddle Demo

html

<form>
    <input  type="text" class="jq-textBox" required="required" />
    <input  type="text" class="jq-textBox" disabled="disabled" />
    <input  type="text" class="jq-textBox" disabled="disabled" />
    <input  type="text" class="jq-textBox" disabled="disabled" />
    <input  type="text" class="jq-textBox" disabled="disabled" />
    <input type="submit" />
</form>

(Note the required attribute for HTML5)

jquery

$('input.jq-textBox').on('keyup', function(){
    var next = $(this).next('input.jq-textBox');
    if (next.length) {
        if ($.trim($(this).val()) != '') next.removeAttr('disabled');
        else {
            var nextAll = $(this).nextAll('input.jq-textBox');
            nextAll.attr('disabled', 'disbaled');
            nextAll.val('');
        }
    }
})

Also see nextAll() jquery Method

Edit : If you want to hide the disabled inputs in order to show them only when the previous input is filled, just add this css :

input[disabled] {
    display: none;
}

Demo