我正在研究引导表单验证。 resetForm();在这里工作正常，但是复选框无法在提交表单时重置。我已经尝试过像$('.form-check-input').val();和$('.form-check-input').val(' ');，$('.form-check-input').reset();这样，但没有尝试。有人可以建议我如何重置表单提交复选框。
$(document).ready(function() {
// reCaptcha random numbers generate
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function generateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 5), '+', randomNumber(1, 10), '='].join(' '));
};
generateCaptcha();
// Form validations
$('#contact_form').bootstrapValidator({
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
regexp: {
regexp: /^\d{10}$/,
message: 'The US zipcode must contain 5 digits'
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
// Determine the numbers which are generated in captchaOperation
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
},
// Success Message display
submitHandler: function(validator, form, submitButton) {
generateCaptcha();
$('#success_message').css('opacity', '1').fadeIn().delay(3000).fadeOut();
//$('#contact_form').bootstrapValidator('resetForm', true);
var bv = form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
}, 'json');
$('#contact_form').bootstrapValidator('resetForm', true);
$('.form-check-input').reset();
}
})
.on('error.form.bv', function(e) {
generateCaptcha();
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<form action="contact-form.php" method="POST" class="needs-validation form-horizontal" id="contact_form" novalidate>
<div class="form-row row">
<div class="col-md-6 col-12 mb-3 pr-5">
<div class="form-group">
<label class="control-label">First Name</label>
<div class="input-group">
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-3 pr-5">
<div class="form-group">
<label class="control-label">Last Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-row row">
<div class="col-md-6 col-12 mb-3 pr-5">
<div class="form-group">
<label class="control-label">E-Mail</label>
<div class="inputGroupContainer">
<div class="input-group">
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-3 pr-5">
<div class="form-group">
<label class="control-label">City</label>
<div class="inputGroupContainer">
<div class="input-group">
<input name="city" placeholder="City" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-row row align-items-center">
<div class="col-md-6 col-12 mb-3 pr-5 ">
<div class="form-group">
<label class="control-label">state</label>
<div class="inputGroupContainer">
<div class="input-group">
<input name="state" placeholder="State" class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-3 pr-5">
<div class="form-group">
<label class="control-label">Zip Code</label>
<div class="inputGroupContainer">
<div class="input-group">
<input name="zip" placeholder="Zip Code" class="form-control" pattern="^[0-9]+$" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-check form-group">
<input name="agree" class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<a href="#" data-toggle="modal" data-target="#exampleModalLong">
<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label></a>
<div class="invalid-feedback">You must agree before submitting.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="form-row row align-items-center">
<div class="form-group">
<label class="col-md-6 col-12 control-label" id="captchaOperation"></label>
<div class="col-md-6 col-12">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Thanks for contacting us, we will get back to you shortly.</div>
<!-- <button class="btn btn-primary" type="submit">Send Request</button> -->
<div class="col-md-4">
<div class="form-group">
<label class="control-label"></label>
<button type="submit" class="btn submit">Send Request</button>
</div>
</div>
</form>
答案 0 :(得分：0)
您可以通过prop方法使用jQuery修改输入元素的checked属性，将其设置为false应该可以解决问题。看起来像$('.form-check-input').prop(checked, false);