javascript - Since adding validation, nothing works -
i have basic bmi calculator wrote, worked fine. in class we're adding validation. did basic in class validation, , thought understood fine. when im trying incorporate validation process bmi calculator, nil works. not understanding why, , have illustration in class up, actual javascript im writing, cant see im doing wrong.
soooo, here's js fiddle, , code. hope can point me in right direction. http://jsfiddle.net/56dcedbu/
html -
<html> <head> <meta charset="utf-8"> <title>bmi calc</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="bmi.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label for="txtage">age:</label> <input type="text" class="txtinput" id="txtage" value="0"/><p id="ageres"></p> <br/> <label for="txtmass">mass in lbs:</label> <input type="text" class="txtinput" id="txtmass" value="0"/> <br/> <label for="txthinch">height in inches:</label> <input type="text" class="txtinput" id="txthinch" value="0"/> <br/> <input type="button" id="btncalc" value="calculate"/> <p id="result2">result</p> </form> </body> </html> and js -
// javascript document $(function () { //identify variables var txtmass, txthinch, result; var isvalid = $('#form1').validate().form(); // attach event listener toggle button's click event $('#btncalc').click(function () { //set validator $.validator.setdefaults({ errorelement: "span", errorclass: "form_error", errorplacement: function(error,element){ error.insertafter(element) } }); $.extend($.validator.messages,{ required: "* required field" }); //set validation perameters $("#form1").validate({ rules: { txtage: { required: true, range: [1, 120], digits: true }, txtmass: { require: true, digits: true }, txthinch: { requre: true, digits: true } } }); if (isvalid) { //set age range form accuracy if (txtage < 16 || txtaage > 80){ //output $('#ageres').html('results may not accurate @ age') } else { (txtage >= 16 || txtage <= 80) $('#ageres').html('results should accurate considering age') //equation bmi result = ($('#txtmass').val() / ($('#txthinch').val() * $('#txthinch').val())) * 703;} //if - else statement output of bmi equation if (result < 16){ $('#result2').html('result: '+result.tofixed(1) + ' severely underweight') } else if (result <=18 ){ $('#result2').html('result: '+result.tofixed(1) + ' underweight') } else if (result <=24){ $('#result2').html('result: '+result.tofixed(1) + ' healthy') } else if (result <= 30 ){ $('#result2').html('result: '+result.tofixed(1) + ' overweight') } else if (result <=35 ){ $('#result2').html('result: '+result.tofixed(1) + ' obese') } else if (result <=40 ){ $('#result2').html('result: '+result.tofixed(1) + ' obese') } } }); }); as usual, give thanks ahead of time, amazing help here. guys priceless resource.
there multiple problems here
class="snippet-code-js lang-js prettyprint-override">// javascript document $(function () { //identify variables var txtmass, txthinch, result, txtage; //set validator $.validator.setdefaults({ errorelement: "span", errorclass: "form_error", errorplacement: function (error, element) { error.insertafter(element) } }); $.extend($.validator.messages, { required: "* required field" }); //set validation perameters $("#form1").validate({ rules: { txtage: { required: true, range: [1, 120], digits: true }, txtmass: { required: true, digits: true }, txthinch: { required: true, digits: true } } }); $('#btncalc').click(function () { var isvalid = $('#form1').validate().form(); if (isvalid) { txtage = $('#txtage').val(); //set age range form accuracy if (txtage < 16 || txtage > 80) { //output $('#ageres').html('results may not accurate @ age'); return; } else if (txtage >= 16 || txtage <= 80) { $('#ageres').html('results should accurate considering age') } //equation bmi result = ($('#txtmass').val() / ($('#txthinch').val() * $('#txthinch').val())) * 703; //if - else statement output of bmi equation if (result < 16) { $('#result2').html('result: ' + result.tofixed(1) + ' severely underweight') } else if (result <= 18) { $('#result2').html('result: ' + result.tofixed(1) + ' underweight') } else if (result <= 24) { $('#result2').html('result: ' + result.tofixed(1) + ' healthy') } else if (result <= 30) { $('#result2').html('result: ' + result.tofixed(1) + ' overweight') } else if (result <= 35) { $('#result2').html('result: ' + result.tofixed(1) + ' obese') } else if (result <= 40) { $('#result2').html('result: ' + result.tofixed(1) + ' obese') } } }); }); class="snippet-code-html lang-html prettyprint-override"><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> <form id="form1" name="form1" method="post" action=""> <label for="txtage">age:</label> <input type="text" class="txtinput" id="txtage" name="txtage" value="0" /> <p id="ageres"></p> <br/> <label for="txtmass">mass in lbs:</label> <input type="text" class="txtinput" id="txtmass" name="txtmass" value="0" /> <br/> <label for="txthinch">height in inches:</label> <input type="text" class="txtinput" id="txthinch" name="txthinch" value="0" /> <br/> <input type="button" id="btncalc" value="calculate" /> <p id="result2">result</p> </form>
javascript jquery validation
No comments:
Post a Comment