Question

我的表单有点问题。我需要验证表单，但现在它仍然提交，它确实让我知道name和total bill丢失，但我还需要radio buttons启动时它失败。有人可以给我一些指示。我对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;

    }

Answer 1

你应该明确定义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表单在提交之前无法验证

1 个答案: