javascript - Validating Bootstrap radio buttons on mouseup/keyup -

i have bit complex form (includes inputs, textareas, custom selects, etc). want perform validation (just check whether fields empty or not). nothing more.

but find difficult validate whether radio button selected or not. i'm using twitter bootstrap , have styled radio buttons through javascript , css (btn-group).

i want whenever user types or clicks run script checks whether field empty or not.

i post jsfiddle link below reproduces problem. javascript use bit different, because want perform check inputs in current tab.

$('body').on('keyup mouseup ', 'li, label, input, textarea, select', function (e) {     var tabid = $(this).closest('.tab-pane').attr('id');     var inputs = $('#' + tabid + ' :input');     var errors = {};     inputs.each(function (i, element) {         if ($(element).attr('name') !== undefined) {             if ($(element).attr('type') !== 'radio') {                 if ($.trim($(element).val()) === '') {                     errors[i] = $(element).attr('name');                 }             } else {                 if ($('.active', $("input[name='" + $(element).attr('name') + "']").closest('.btn-group')).length <= 0) {                     errors[i] = $(element).attr('name');                 }             }         }     });     console.log(errors);     if (!$.isemptyobject(errors)) {         $('a[href="#' + tabid + '"]')             .html("<i class='red ace-icon fa fa-times bigger-120'></i> " + $('a[href="#' + tabid + '"]').text());     } else {         $('a[href="#' + tabid + '"]')             .html("<i class='green ace-icon fa fa-check bigger-120'></i> " + $('a[href="#' + tabid + '"]').text());     } }); 

http://jsfiddle.net/gzwyddrc/ reproduce problem:

1. click on text field (an alert tell form not valid) - ok

2. close alert , type 1 letter (otherwise annoyed alert). alert pop out again telling form still invalid. - ok

3. now click on 1 of radio buttons. alert still tell form invalid. - not ok

4. if click on either text field or 1 of radio buttons alert has else say: form valid! - not ok

i believe i've misused events binded elements want fire validation.

ok, i've looked this, there quite lot of changes had make.

this code:

$("form").on("keyup mouseup", function (ev) {     var selected, errors = [];      settimeout(function () {         $("input,select").each(function (i, v) {             var e;              e = $(v);             if (e.attr("name") === undefined) return;              switch (e.attr("type"))             {                 case "radio":                     selected = false;                     e.closest(".btn-group").find("input[type=radio]").each(function (i, v) {                         if ($(v).closest("label").hasclass("active"))                         {                             selected = true;                         }                     });                      if (!selected) {                         errors.push(e.attr("id"));                     }                     break;                 default:                     if ($.trim(e.val()) === "")                     {                         errors.push(e.attr("name")); // should id?                     }                     break;             }         });          if (errors.length > 0) {             alert("errors: " + errors);         }     }, 10); }); 

the changes made are:

• event handlers attached form, more convenient multi-form pages (imagine separate form on top login);
• the selector considers select (dropdowns) possible input field;
• minor name/order changes make more readable;
• the switch replaces if, because encounter more input types further along (switch scales better if..else);
• replaced error object error array on push() errors;
• when radio group unselected, whole group invalid, not single 1 of radio buttons nested, check should based on group whole (see use of selected flag);
• for radio buttons active class toggled on label not on input;
• finally, important feature you'll have noticed:

bootstrap uses events , js toggle active class, if check right away label never have active class -- counter this, inserted settimeout() fire validation 10 ms later (which still instantly humans) bootstrap has time make update pass on form before go in , validate.

i checked thoroughly in fiddle, i'm quite confident works , opens many possibilities you've envisioned.