[英]jQuery - Code to check if any of the fields are not empty, and then make all of them required
I am a PHP developer and new to jQuery, I just wrote a few lines of code before and it was all from online sources. 我是PHP开发人员,并且是jQuery的新手,我之前只写了几行代码,而这些都是来自在线资源。 Anyways, I have these three inputs in html:
无论如何,我在html中有以下三个输入:
<input type="password" name="old-password" id="old-password">
<input type="password" name="new-password" id="new-password">
<input type="password" name="confirm-new-password" id="confirm-new-password">
<button type="submit" id="save" class="button button-primary">Save Changes</button>
I have a full page of settings and these three fields are for passwords, but I want to make them required only if the user enters any data into any of the inputs. 我有一整页的设置,这三个字段用于输入密码,但是我只想在用户将任何数据输入到任何输入中时才要求输入密码。
Example: A user types in old password input, all 3 inputs gets required real-time. 示例:用户输入旧密码输入,所有3个输入均实时获取。 Or a user types in confirm new password input, all 3 inputs gets required as well.
或者用户输入确认新密码输入,则还需要全部3个输入。
Thank you for the help. 感谢您的帮助。
Solution: The answers were all great and thank you everyone for the help. 解决方案:答案都很好,谢谢大家的帮助。 Another problem came up, is that if someone tries to backspace and remove the text on the form, it still stays required.
出现另一个问题是,如果有人尝试退格并删除表单上的文本,它仍然保持必需状态。 I came up with a solution with the help of all the answers.
在所有答案的帮助下,我想出了一个解决方案。
You have to add a .password class to all the wanted inputs, and then put this in script tags: 您必须将.password类添加到所有所需的输入中,然后将其放入脚本标签中:
$('.password').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#old-password').removeAttr('required', '');
$('#new-password').removeAttr('required', '');
$('#confirm-new-password').removeAttr('required', '');
} else {
$('#old-password').attr('required', '');
$('#new-password').attr('required', '');
$('#confirm-new-password').attr('required', '');
}
});
Use .attr()
on the oninput
event. 在
oninput
事件上使用.attr()
。
ie something like this: 即是这样的:
function makeRequired(){
$("#old-password").attr("required","");
$("#new-password").attr("required","");
$("#confirm-new-password").attr("required","");
}
And then bind it to oninput
either in your HTML or in JS. 然后将其绑定到HTML或JS中的
oninput
。
Using your condition 使用您的条件
if the user enters any data into any of the inputs.
如果用户在任何输入中输入任何数据。
You could write this event 你可以写这个活动
$("body").on("input", "#confirm-new-password,#new-password,#old-password", function()
{
$("#confirm-new-password").attr('required', 'required');
$("#new-password").attr('required', 'required');
$("#old-password").attr('required', 'required');
});
if ($("#old-password").val() != "" ||
$("#new-password").val() != "" ||
$("#confirm-new-password").val() != "") {
$("#old-password").attr("required");
$("#new-password").attr("required");
$("#confirm-new-password").attr("required");
}
well, I extremly recommend to use a library like Jquery validate jqueryValidate 好吧,我极力推荐使用像Jquery一样的库validate jqueryValidate
But, if you don't want to use, you can try this: 但是,如果您不想使用,可以尝试以下操作:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="password" name="old-password" id="old-password" class="passwordToCheck">
<input type="password" name="new-password" id="new-password" class="passwordToCheck">
<input type="password" name="confirm-new-password" id="confirm-new-password" class="passwordToCheck">
<button type="submit" id="save" class="button button-primary">Save Changes</button>
<script>
$(".passwordToCheck").change(function(){
passInput = $(this);
if(passInput.val().trim() != ""){
passInput.addClass("required");
} else {
passInput.removeClass("required");
}
});
$("#save").click(function(e){
e.preventDefault();
if($(".required").length >0){
alert("fill the fields!");
} else {
alert("OK");
$(this).submit();
}
});
</script>
adding a class to your password-type inputs, and working with required class ( you can change this easily by the required attr if you don't want to work with class required. 将一个类添加到您的密码类型输入中,然后使用必需的类(如果您不想使用必需的类,可以通过必需的attr轻松更改此类。
here is the fiddle: 这是小提琴:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.