CODEWITHSUNDEEP
javascriptjqueryvalidation
Kyle Underhill
Kyle Underhill

Reputation: 109

jQuery show div for empty input fields (validation)

I want the .indicator to show for the fields that are empty and required only when the .edit-icon is :checked.

I'm trying to use this as a validation so the user knows which inputs are missing.

$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

function editStatus() {
  $("#edit-toggle").on("change", function() {
    $(this).toggleClass("new");
    toggleStatus();
  });
}

function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $(".indicator").removeClass('animate');
    $(".edit :input").attr("disabled", true);
  } else {
    $(".indicator").addClass('animate');
    $(".edit :input").removeAttr("disabled");
  }
}
.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
  <div class="indicator"></div>
</div>

Upvotes: 0

Views: 36

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

If you only want the validation to happen when the user clicks the edit you can do this, but I also have another suggestion at the bottom:

$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

function editStatus() {
  $("#edit-toggle").on("change", function() {
    $(this).toggleClass("new");
    toggleStatus();
  });
}

function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $(".indicator").removeClass('animate');
    $(".edit :input").attr("disabled", true);
  } else {
    $('.edit :input').each(function() {
      if($(this).val() == '' && $(this).prop('required')) {
        $(this).parent().find('.indicator').addClass('animate');
      }
    });
    $(".edit :input").removeAttr("disabled");
  }
}
.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
  <div class="indicator"></div>
</div>

This will check while the user is typing:

$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);

function editStatus() {
  $("#edit-toggle").on("change", function() {
    $(this).toggleClass("new");
    toggleStatus();
  });
}

function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $(".edit :input").attr("disabled", true);
  } else {
    $('.edit :input').each(function() {
      if($(this).val() == '' && $(this).prop('required')) {
        $(this).parent().find('.indicator').addClass('animate');
      }
    });
    $(".edit :input").removeAttr("disabled");
  }
}

$(".edit :input").on('keyup', function() {
  var $this = $(this);
  var $indicator = $('.indicator', $this.parent());
  if ($this.val() == '' && $this.prop('required')) {
    $indicator.addClass('animate');
  } else {
    $indicator.removeClass('animate');
  }
});
.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
  <div class="indicator"></div>
</div>
<div class="edit block">
  <input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
  <div class="indicator"></div>
</div>

Upvotes: 1

Related Questions