Validating individual form inputs with javascript -

i have registration form validates text field, if it's empty when user clicks/tabs off shows error message. issue below code lot duplicate across several form fields. below example first name can't see way of using have same more 1 field.

            /* call ajax call after entering below 3 fiels */     var $fields = $('#testid');     $fields.live('blur',function(e) {         e.preventdefault();         var $emptyfields = $fields.filter(function() {             return $.trim(this.value) === "";         });          if ($emptyfields.length) {                  var frm = $(this).parents('form');                 var url=$('#valnameemail').val();                 jquery.ajax({                          url: url,                          data: $(this).parents('form').serialize(),                          type: 'post',                          datatype: "json",                          success: function(response){                             if (response.htmlmessage === 'success'){                                 $('.reg-alreadyregistered').html('');                                 $('.reg-alreadyregistered').css('display', 'none');                                  acc.registration.tickicon($('#testid'));                                   var radioexcustvalue = $('#registration-form input[name=existingcustomer]:checked').val();                                  if (usernameajax === true) {                                      if (radioexcustvalue == 'false'){                                          $('#regformsubmit').removeattr('disabled');                                      }                                      else {                                          if (customervalidation == true){                                              $('#regformsubmit').removeattr('disabled');                                          }                                      }                                  }                                  emailidajax = true;                              } else {                                  acc.registration.erroricon($('#testid'));                                    $('.reg-alreadyregistered').html(response.htmlmessage);                                  $('.reg-alreadyregistered').css('display', 'block');                                  emailidajax = false;                                  $('#regformsubmit').attr('disabled','disabled');                              }                          },                          error: function(){                                 //alert(response);                                 //console.log('error!')                          }                    });         }     }); 

you can give same inputs require same sort of validation class (or if want example input[type=text] can use selector.

so let's have form this:

<form id="mform">     <input type="text" class="inptxt" name="it1" />     <input type="text" class="inptxt" name="it2" />     <!-- other similar text inputs same class -->     <input type="submit" id="sub" value="submit" /> </form> 

i have function text inputs returns false if field empty, otherwise true:

$.fn.isvalid = function() {     return $.trim($(this).val()); } 

and inputs class , validate them @ once:

$('#mform').on('submit', function(e) {     e.preventdefault();     var allvalid = true;     $('.inptxt').each(function() {         if (!$(this).isvalid()) {             $(this).css('background-color', 'red');             allvalid = false;         }         else             $(this).css('background-color', 'white');     });     if(allvalid) {         //everything's valid ... submit form     } }); 

jsfiddle demo