我的表单有点问题。我需要验证表单，但现在它仍然提交，并且它确实让我知道 name 和 total bill 丢失了，但我还需要 单选按钮在失败时启动。有人可以给我一些指点吗？我对 JQuery 还很陌生，但我喜欢学习它。我刚刚碰到了一个树桩，并且被困了大约一周。这是我的 HTML:
<head>
<meta charset="utf-8">
<title>Forms</title>
<link href="css/styles.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/calculate.js"></script>
<!--new jquery validation scripts-->
<script src="jquery-validation-1.17.0/lib/jquery.js"></script>
<script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
<script src="js/validate-proj8.js"></script>
</head>
<body>
<h1>Simple Tip Calculator</h1>
<h2>This calculator will calculate a tip.</h2>
<h3>
Questions? Contact us at <span class="bobEmail"> bob@example.com</span> or
<span class="bobieEmail">bobbie@example.com</span>
</h3>
<form id="tipCalc" name="tipCalc" method="get" action="">
<label for="name">Name:</label><input type="text" name="name" id="name">
<br>
<label for="gender_m">Gender: Male</label><input type="radio"
name="gender" value="masculine" id="gender_m"><label
for="gender_f">Female</label><input type="radio" name="gender"
value="feminine" id="gender_f"><br>
<label for="total">Total bill:</label><input type="text" name="total" id="total"><br>
<label for="percent">Tip percent:</label><input type="text" name="percent" id="percent" value="15"><br>
<input type="checkbox" name="round" id="round"><label for="round">Round off final answer?</label><br>
<label for="roundTo_dollar">Nearest dollar</label><input type="radio"
name="roundTo" value="int" id="roundTo_dollar"><br>
<label for="roundTo_ten">Nearest dime</label><input type="radio"
name="roundTo" value="ten" id="roundTo_ten"><br>
<label for="roundTo_penny">Nearest cent</label><input type="radio"
name="roundTo" value="hun" id="roundTo_penny"><br>
<input type="submit" name="submit" id="submit" value="Calculate">
</form>
<h3 id="totalBill">Total bill:</h3>
<h3 id="totalTip">Tip:</h3>
</body>
</html>
这是我的 JavaScript:
$('document').ready(function() {
formValidate();
checkButton('#round', 'input[name=roundTo]');
});//end on function
function formValidate(){
$('#tipCalc').validate({
rules: {
name: {
required: true,
},
total: {
required: true,
},
percent: {
required: true,
},
}, //end rules
}); // end validate
}
function checkButton(roundMe, dependents) {
$(dependents).each(function(){
$(this).attr('disabled', true);
});//end each
$('#submit').click(function(evt){
if($(this).is(':checked')!==1){
}
});
}
这是我的 CSS:
form {
border-bottom: 1px dashed #333;
padding-bottom: 10px;
}
h1+h2, h2+h3 {
margin-top: -1em;
}
body {
font-size: 100%;
}
label {
display: inline-block;
width: 100px;
margin: 5px;
}
legend {
padding: 0.5em;
}
#tipCalc label.error, #tipCalc button.submit {
margin-left: 253px;
}
#tipCalc {
width: 670px;
}
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#tipCalc label.error {
display: none;
margin-left: 103px;
}
#tipCalc label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#tipCalc input.error, #tipCalc select.error {
background: #FFA9B8;
border: 1px solid red;
}
input[type="radio"] {
background: #FFA9B8;
}
最佳答案
你应该显式定义invalidHandler和submitHandler。
function formValidate(){
$('#tipCalc').validate({
//
//
invalidHandler: function(event, validator) {
//disable other action if applicable, show errors etc
},
submitHandler: function(event, validator) {
//submit form
}
});
}
关于JQuery 表单提交前验证失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47027890/