jQuery show div表示空输入字段（验证）

时间：2018-05-02 17:58:58

标签： javascript jquery validation

我希望.indicator仅在empty为required时显示.edit-icon和:checked字段。

我试图将其用作验证，以便用户知道缺少哪些输入。

＆＃13;
＆＃13; 
$("#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");
  }
}
＆＃13; 
.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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

如果您只想在用户点击编辑时进行验证，您可以执行此操作，但我在底部还有其他建议：

$("#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>

这将在用户输入时进行检查：

$("#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>

相关问题
最新问题