2
私のフォームに少し問題があります。私はフォームを検証する必要がありますが、今でも依然として提出し、nameとtotal billが欠落していることを知らせますが、失敗したときにはradio buttonsも起動する必要があります。誰かが私にいくつかの指摘を与えることができます。私はJQueryでかなり新しいですが、私はそれを学ぶのが大好きです。私はちょうど切株に当たって、約1週間それに固執しました。ここに私のHTMLです：投稿前にJQueryフォームの検証に失敗しました
<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"> [email protected]</span> or
<span class="bobieEmail">[email protected]</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;
}
ボタンのタイプを入力タイプ= "submit"から "button"に変更すると、フォームは送信されず、検証エラーがなければフォームを送信してください。 –