Jquery - Form field JS code through looping

Below HTML & JS written for form submission. This works fine as expected.

But, i want to minimize JS code length by using any loop iteration.

Between both 'Full Name' & 'Booking Ref no.' only ID & Class name is changing. Remaining JS scripts are same.

Is it possible to make JS code clean by using any loop iterations?

Thanks

HTML:

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 fullname">
    <div class="form-title">Full name</div>
    <input type="text" name="Full Name" id="fullname" data-fullname="Full name is missing">
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 bookingrefno">
    <div class="form-title">Booking reference number</div>
    <input type="text" name="Booking Reference Number" id="bookingrefno" data-refno="Booking Reference No. is not valid">
  </div>
</div>

JS:

/* Full Name*/
$('#fullname').focus(function(){
  $('.fullname .form-title').addClass('input-filled');
  $(this).addClass('input-focused');
  $(this).removeClass('has-error');
  $(this).parent().find('.form-title').removeClass('has-error');
});
$('#fullname').blur(function(){
  if($('#fullname').val() == ''){
    $('.fullname .form-title').removeClass('input-filled');
    $(this).removeClass('input-focused');
  } else {
    $('.fullname .form-title').addClass('input-filled');
    $(this).addClass('input-focused');
  }
});
$('.fullname .form-title').click(function(){
  $(this).addClass('input-filled');
  $('#fullname').addClass('input-focused');
});

/* Ref No */
$('#bookingrefno').focus(function(){
  $('.bookingrefno .form-title').addClass('input-filled');
  $(this).addClass('input-focused');
  $(this).removeClass('has-error');
  $(this).parent().find('.form-title').removeClass('has-error');
});
$('#bookingrefno').blur(function(){
  if($('#bookingrefno').val() == ''){
    $('.bookingrefno .form-title').removeClass('input-filled');
    $(this).removeClass('input-focused');
  } else {
    $('.bookingrefno .form-title').addClass('input-filled');
    $(this).addClass('input-focused');
  }
});
$('.bookingrefno .form-title').click(function(){
  $(this).addClass('input-filled');
  $('#bookingrefno').addClass('input-focused');
});

Answers 1

  • <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 fullname validate">
        <div class="form-title">Full name</div>
        <input type="text" name="Full Name" id="fullname" data-error-msg="Full name is missing">
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 bookingrefno validate">
        <div class="form-title">Booking reference number</div>
        <input type="text" name="Booking Reference Number" id="bookingrefno" data-error-msg="Booking Reference No. is not valid">
      </div>
    </div>
    
    $('.validate')
      .on('focus','input',function(){
        var $this = $(this);
        $this
          .addClass('input-focused')
          .removeClass('has-error');
        $('.form-title',$this.parent())
          .addClass('input-filled')
          .removeClass('has-error');
      })
      .on('blur','input',function(){
        var $this = $(this);
        if($this.val() == '') {
          $this.removeClass('input-focused');
          $('.form-title',$this.parent()).addClass('input-filled');
        }
        else {
          $this.addClass('input-focused');
          $('.form-title',$this.parent()).removeClass('input-filled');
        }
      })
      .on('click','.form-title',function(){
        var $this = $(this);
        $this.addClass('input-filled');
        $('input',$this.parent).addClass('input-focused');
      });
    

    Add the class validate to each of the input wrappers and select on that. Most jQuery functions operate on all the elements in a selection effectively being virtual .forEach loops.


Related Articles