JQuery Form is failed to validate before submit

I have a bit of a problem with my form. I need to validate the form, but right now it still submits, and it does let me know that the name and total bill are missing, but I also need the radio buttons to fire up when it fails. Could someone give me some pointers. I am fairly new with JQuery, but I love learning it. I just hit a stump, and been stuck with it for about a week. here is my 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"> [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>

Here is my 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){

    } 
});
}

Here is my 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;

    }

Answers 1

  • you should define invalidHandler and submitHandler explicitly.

    function formValidate(){ 
     $('#tipCalc').validate({
     //
     //
    
        invalidHandler: function(event, validator) {
          //disable other action if applicable, show errors etc
        },
    
        submitHandler: function(event, validator) {
          //submit form
        }
     });
    }
    

Related Articles