如何在无效反馈中显示消息?

问题描述 投票:1回答:1

如果密码与使用jquery的确认密码不匹配,我试图使消息显示在无效反馈(确认密码)中但是当我尝试删除密码中的单个字符时,消息仍然没有出现在无效的反馈中

$("#txtpassword").keyup(function () {
    var value = $(this).val();
    var password = $("#txtconfirmpassword");
    if (value.length == 0) {
        $("#passRequired").html("Required Field");
    }
    else if (value != password) {
        $("#confirmRequired").html("Password doesn't match");
    }
    else {
        $("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
    }
});

function check(input) {
    if (input.value != document.getElementById('txtpassword').value) {
        input.setCustomValidity('Password must be matched');
    }
    else {
        input.setCustomValidity('');
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-12 col-md-8 center-block">
     <label for="inputEmail4">Password</label>
     <input type="password" class="form-control" id="txtpassword" placeholder=""  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" aria-describedby="inputGroupPrepend" required>
     <div class="invalid-feedback" id="passRequired">
         Required Field
     </div>
 </div>

 <div class="form-group col-12 col-md-8 center-block">
     <label for="inputEmail4">Confirm Password</label>
     <input type="password" class="form-control" id="txtconfirmpassword" placeholder="" oninput="check(this)"  style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
     <div class="invalid-feedback" id="confirmRequired">
         Required Field.
     </div>
 </div>
jquery html5 bootstrap-4
1个回答
1
投票

主要问题来自缺少的.val()

var password = $("#txtconfirmpassword").val();

所以你的代码试图将字符串与jQuery对象进行比较,这就是条件失败的原因。

$("#txtpassword").keyup(function() {
  var value = $(this).val();
  var password = $("#txtconfirmpassword").val();

  if (value.length == 0) {
    $("#passRequired").html("Required Field");
  } else if (value != password) {
    $("#confirmRequired").html("Password doesn't match");
  } else {
    $("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
  }
});
$("#txtconfirmpassword").keyup(function() {
  if ($(this).val() != $('#txtpassword').val()) {
    $(this).get(0).setCustomValidity('Password must be matched');
  } else {
    $(this).get(0).setCustomValidity('');
  }
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group col-12 col-md-8 center-block">
    <label for="inputEmail4">Password</label>
    <input type="password" class="form-control" id="txtpassword" placeholder="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" aria-describedby="inputGroupPrepend" required>
    <div class="invalid-feedback" id="passRequired">
      Required Field
    </div>
  </div>

  <div class="form-group col-12 col-md-8 center-block">
    <label for="inputEmail4">Confirm Password</label>
    <input type="password" class="form-control" id="txtconfirmpassword" style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
    <div class="invalid-feedback" id="confirmRequired">
      Required Field.
    </div>
  </div>

  <button>Submit</button>
</form>
© www.soinside.com 2019 - 2024. All rights reserved.