使用 HTML5 表单验证仅验证可见字段?
Validate only visible fields with HTML5 form validation?
我有两组表单域,每组中都有一些具有必填属性的域。但是,根据用户的选择,一组可能会被隐藏,并且这些字段不应包含在 HTML5 表单验证中。到目前为止,如果我在表单中只有一个可见容器并且我填充了所有必填字段,我的表单将不会提交。由于某些原因,那些隐藏字段仍然是必需的。有没有办法从验证中排除这些字段?这是示例:
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
如果有人知道如何防止隐藏容器内的字段进行验证,请告诉我。
由于默认情况下两个复选框都处于关闭状态,因此将 disabled
添加到两个 div 内的输入(选择)中。然后你所要做的就是在.change()
里面,根据相应复选框的状态切换disabled
属性。
高
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
$('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
我有两组表单域,每组中都有一些具有必填属性的域。但是,根据用户的选择,一组可能会被隐藏,并且这些字段不应包含在 HTML5 表单验证中。到目前为止,如果我在表单中只有一个可见容器并且我填充了所有必填字段,我的表单将不会提交。由于某些原因,那些隐藏字段仍然是必需的。有没有办法从验证中排除这些字段?这是示例:
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
如果有人知道如何防止隐藏容器内的字段进行验证,请告诉我。
由于默认情况下两个复选框都处于关闭状态,因此将 disabled
添加到两个 div 内的输入(选择)中。然后你所要做的就是在.change()
里面,根据相应复选框的状态切换disabled
属性。
高
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
$('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>