如果前一个表单字段填写正确,我想逐个激活表单字段。
这是我的表格 -
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<div class="form-group">
<label for="">Description</label>
<textarea class="form-control description" rows="3" placeholder="Enter Your Description" disabled></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
当加载页面时,我想保留除第一个之外的所有表单字段disabled
(这里是名字)。如果第一个名字填写正确,那么我需要激活电子邮件归档,如果填写正确,那么我需要激活下一个,依此类推。
所以我尝试了类似的东西 -
$('input.name').keyup(function () {
if ($(this).val()) {
$('input.email').removeAttr('disabled');
} else {
$('input.email').attr('disabled', true);
}
});
它仅适用于电子邮件。所以我想知道我如何为别人做这件事。而且我听说使用prop()
而不是attr()
的人更好。
有谁能告诉我这样做的最佳方法是什么?
这是DEMO,其中包含当前代码
谢谢。
答案 0 :(得分:0)
这有效:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var field = 2;
$('.form-control').blur(function () {
if ($(this).val()) {
$('#'+field).removeAttr('disabled');
field++;
}
});
</script>
</head>
<body>
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name" id=1>
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled id =2>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled id=3>
</div>
<div class="form-group">
<label for="">Description</label>
<textarea class="form-control description" rows="3" placeholder="Enter Your Description" disabled id=4></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
我更新了Demo
答案 1 :(得分:0)
第一个假设:序列中的所有元素都有“序列”类。
第二个假设:每个元素都有相关的验证器,如果值正确,则赋值“有效”。
$('.sequence').on('change blur', function(event) {
if ($(event.target).hasClass('valid') {
$(event.target).next('.sequence').removeAttr('disabled');
}
});
演示:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<div class="form-group">
<label for="">Description</label>
<textarea class="form-control description sequence" rows="3" placeholder="Enter Your Description" disabled></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
</script>
</body>
</html>