Jquery - floating label effect remove when the required is remove too

BryanClerigo
January 10, 2024
198 views
0 votes
2 Answers

is there a way I can use for the floating Label on bootstrap 4, when im removing the required on the input the label stay’s at the top of the border.

$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});

.appointment {
  padding-top: 49px;
  margin-bottom: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

a:hover {
  color: blue;
  transition: .5s;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ced4da;
  position: relative;
  z-index: 1;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.2s ease-out all;
  z-index: 2;
  border: 1px solid transparent;
  padding-left: 10px;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input:valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="firstname" class="form-control" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="col">
        <input type="text" id="middlename" name="middlename" class="form-control">
        <label for="middlename">Middle Name</label>
      </div>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="lastname">Last Name</label>
      </div>
    </div>
  </div>
  <div class="text-center">
    <label>
      <a href="{{ route('index') }}"><i class="icofont-bubble-left"></i> Back to Home</a>
    </label>
  </div>
  <br>
</form>

as you can see i on my script, i don’t know what is incorrect or something i missing, why the label is floating already even if it is reload or not focus.

Answers

The culprit is this CSS line:

.form-group input:valid+label

The label is formatted when the field is not required, hence valid.

In your demo you are also missing Bootstrap’s CSS, add the line:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});

.appointment {
  padding-top: 49px;
  margin-bottom: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

a:hover {
  color: blue;
  transition: .5s;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ced4da;
  position: relative;
  z-index: 1;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.2s ease-out all;
  z-index: 2;
  border: 1px solid transparent;
  padding-left: 10px;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label
 {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="firstname" class="form-control" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="col">
        <input type="text" id="middlename" name="middlename" class="form-control">
        <label for="middlename">Middle Name</label>
      </div>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="lastname">Last Name</label>
      </div>
    </div>
  </div>
  <div class="text-center">
    <label>
      <a href="{{ route('index') }}"><i class="icofont-bubble-left"></i> Back to Home</a>
    </label>
  </div>
  <br>
</form>

Easiest workaround (IMHO) – modify the selector, to use a class .valid instead of the :valid pseudo class, and then toggle that class on the input field itself, based on whether it is empty or not.

$(document).ready(function() {
  $('.form-group input').on('blur', function() {
    $(this).toggleClass('valid', $(this).val() !== '');
  });
});

.appointment {
  padding-top: 49px;
  margin-bottom: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-group .col {
  position: relative;
}

a:hover {
  color: blue;
  transition: .5s;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ced4da;
  position: relative;
  z-index: 1;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.2s ease-out all;
  z-index: 2;
  border: 1px solid transparent;
  padding-left: 10px;
}

.form-group input:focus,
.form-group input:valid {
  border-color: #ced4da;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group input:focus+label,
.form-group input.valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="firstname" class="form-control" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="col">
        <input type="text" id="middlename" name="middlename" class="form-control">
        <label for="middlename">Middle Name</label>
      </div>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="lastname">Last Name</label>
      </div>
    </div>
  </div>
  <div class="text-center">
    <label>
      <a href="{{ route('index') }}"><i class="icofont-bubble-left"></i> Back to Home</a>
    </label>
  </div>
  <br>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – floating label effect remove when the required is remove too

Answers