我一直试图使用juery来验证表单，我想确保所有字段以及复选框/单选按钮都已填写。这是我的代码（有点混乱，但是我对编码很陌生，必须自己学习）
对于如何解决它的任何答案，将不胜感激，谢谢。
<script>
//Creating the validation function
$(document).ready(function() {
$('form[id="checkout"]').validate({
//Setting up the requirements for form
rules: {
//Check if name is entered
firstname: 'required',
lastname: 'required',
//Check if genders is selected
genders: 'required',
//Check if birthday is entered
bday: 'required',
messages: {
firstname: 'Please enter your first name',
lastname: 'Please enter your last name',
genders: 'Please select your gender',
bday: 'Please enter your birthday',
checkbox: 'Please check at least one box'
},
//Check if at least one checkbox has been filled
//If everything meets the requirements, submit the form
submitHandler: function(form) {
form.submit();
}
};
});
});
function checkboxFunction() {
var checkBox = document.getElementById("checkbox");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "none";
} else {
text.style.display = "checkbox";
}
}
</script>body {
font-family: 'Roboto', sans-serif;
background-color: #E4DFDA;
}
h1 {
letter-spacing: 3px;
font-size: 30pt;
background-color: #4062BB;
height: 110px;
padding-top: 45px;
color: white;
top: 0;
text-align: center;
}
h2 {
font-weight: 200;
}
h3 {
font-weight: 100;
}
.container {
width:100%;
text-align: center;
margin: auto;
}
.form-outline {
width: 35%;
margin: auto;
text-align: left;
}
.bday {
padding: 10px 25px;
border-radius: 5px;
}
.url-form {
padding: 10px 35px;
text-align: left;
}
form {
text-align: left;
}
.bottom-form {
text-align: center;
margin:auto;
}
.required:after {
content:" *";
color: red;
}
.button {
padding: 10px 25px;
color: white;
background-color: #4062BB;
font-size: 14pt;
font-weight: 100;
border-radius: 5px;
border: 3px solid #4062BB;
}
.button:hover {
color: #4062BB;
background-color: transparent;
}
.required:after { content:" *"; }
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
#footer {
margin-top: 100px;
background-color: grey;
padding-top: 45px;
padding-bottom: 45px;
color: white;
bottom: 0;
text-align: center;
}<body>
<h1>Checkout</h1>
<br>
<div class="container">
<h2>Almost done! All we need now is a little bit more about you.</h2>
<h3><em>Please fill all the fields marked with <strong style="color:red;">*</strong> before submitting.</em></h3>
<br>
<p>_____________________</p>
<br>
<div class="form-outline">
<!--Creating the form-->
<form action="https://formspree.io/prometheus111222333@gmail.com" method="POST" name="CheckoutForm" onsubmit="FormValidate()" id="checkout">
<h3 class="required">What is your name?</h3>
<!--Enter name-->
<input type="text" name="firstname" id="firstname" placeholder="First name" style="padding:10px; border-radius:3px;" for="firstname">
<input type="text" name="lastname" id="lastname" placeholder="Last name" style="padding:10px; border-radius:3px;" for="lastname">
<br><br>
<!--Display client ID (can't be modified)-->
<em>Client ID</em><br><br>
<input type="text" name="id" value="#1322247" style="text-align:center; padding:10px; border-radius:3px;" disabled>
<br><br>
<!--Select gender-->
<h3 class="required" id="genders" for="genders">What is your gender?</h3>
<input type="radio" name="gender" id="male" value="male"> Male<br>
<input type="radio" name="gender" id="female" value="female"> Female<br>
<input type="radio" name="gender" id="other" value="other"> Other
<br><br>
<h3 class="required">When is your birthday?</h3>
<!--Enter Birthday-->
<input type="date" name="bday" id="bday" class="bday" for="bday">
<br><br>
<h3 class="required">Do you own any of the following items?</h3>
<h4>(check none if you do not)</h4>
<!--Checkbox-->
<input type="checkbox" name="vehicule1" id="vehicule1" value="Bicycle"> Bicycle<br>
<input type="checkbox" name="vehicule2" id="vehicule2" value="Car"> Car <br>
<input type="checkbox" name="vehicule3" id="vehicule3" value="Motorcycle"> Motorcycle <br>
<input type="checkbox" name="vehicule4" id="vehicule4" value="Tractor"> Tractor <br>
<input type="checkbox" name="vehicule5" id="vehicule5" value="None"> None
<br>
<div class="bottom-form">
<p>_____________________</p>
<br>
<h2>Now, what can we do for you?</h2>
<h3>Enter your website's url to get promoted on ours!</h3>
<!--Enter website url-->
<input type="url" name="websiteUrl" id="websiteUrl" class="url-form"> <br><br>
<h3>All done? Click submit!</h3>
<input class="button" type="button" onclick="function()" value="Submit" >
</div>
</form>
</div>
</div>
<!--Adding the footer-->
<h2 id="footer">Thank you for your trust & fidelity</h2>
</body>
答案 0 :(得分：0)
您应该使用以下类似内容：
$("#AddProductCategory").validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
excluded: ':disabled',
rules: {
Title: {
minlength: 2,
required: true,
maxlength:100
},
EnglishTitle: {
minlength: 2,
required: true,
maxlength: 100
},
IsProductLine: {
required: true
},
IsVisible: {
required: true
},
Image: {
accept: "png|jpe?g|gif",
filesize: 150000
}
},
messages: {
Image: {
accept: "نوع فایل ورود باید .png .jpeg .png باشد",
filesize:"سایز عکس انتخابی حداکثر می تواند 150KB باشد"
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
ModalAlert("DivAlert", "فرم دارای خطا می باشد", "danger");
$('.modal').animate({ scrollTop: 0 }, 'slow');
},
errorPlacement: function (error, element) { // render error placement for each input type
if (element.parents('.mt-radio-list').size() > 0 || element.parents('.mt-checkbox-list').size() > 0) {
if (element.parents('.mt-radio-list').size() > 0) {
error.appendTo(element.parents('.mt-radio-list')[0]);
}
if (element.parents('.mt-checkbox-list').size() > 0) {
error.appendTo(element.parents('.mt-checkbox-list')[0]);
}
} else if (element.parents('.mt-radio-inline').size() > 0 || element.parents('.mt-checkbox-inline').size() > 0) {
if (element.parents('.mt-radio-inline').size() > 0) {
error.appendTo(element.parents('.mt-radio-inline')[0]);
}
if (element.parents('.mt-checkbox-inline').size() > 0) {
error.appendTo(element.parents('.mt-checkbox-inline')[0]);
}
} else if (element.parent(".input-group").size() > 0) {
error.insertAfter(element.parent(".input-group"));
} else if (element.attr("data-error-container")) {
error.appendTo(element.attr("data-error-container"));
} else {
error.insertAfter(element); // for other inputs, just perform default behavior
}
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
CreateProductCategory();
$('.modal').animate({ scrollTop: 0 }, 'slow');
}
});