[英]Javascript check if input field has value
Im trying to figure out how can Javascript check if input field has any value, then it removes class value "is-invalid". 我试图弄清楚Javascript如何检查输入字段是否有任何值,然后删除类值“ is-invalid”。
I have this code so far: 到目前为止,我有以下代码:
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
<script>
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
element.classList.remove("is-invalid");
}
</script>
As you can see theres a red border (class="is-invalid") around the input. 如您所见,输入周围有一个红色边框(class =“ is-invalid”)。 As soon as user puts any value in the inputfield, Javascript will remove class value "is-invalid".
一旦用户在输入字段中输入任何值,Javascript将删除类值“ is-invalid”。
Or might there be an easier option with jQuery? 还是jQuery有一个更简单的选择?
You have a mistake in your code. 您的代码有误。 You have used
你用过
element.classList.remove("is-invalid");
which is wrong, you have to use it like 这是错误的,您必须像
checkInput.classList.remove("is-invalid");
You can use like this in javascript. 您可以在javascript中使用此类。
function check(){ var checkInput = document.getElementById("inputName"); if (checkInput.value) { checkInput.classList.remove("is-invalid"); } else { checkInput.classList.add("is-invalid"); } }
<form> <label for="inputName">Username</label> <input type="text" class="is-invalid" id="inputName" onkeyup="check()"> </form>
In Jquery you can try like 在jQuery中,您可以尝试像
$('#inputName').keyup(function(e){ if ($('#inputName').val()) { $('#inputName').removeClass("is-invalid"); } else { $('#inputName').addClass("is-invalid"); } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label for="inputName">Username</label> <input type="text" class="is-invalid" id="inputName"> </form>
You need to add an event listener to the element to know when it changes. 您需要向元素添加事件侦听器,以了解其何时更改。
var checkInput = document.getElementById("inputName");
checkInput.addEventListener('keyup', (e)=>{
if (e.target.value!==''){
e.target.classList.remove("is-invalid");
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.