jquery - Javascript - check form field value and display error message if value is 0 - Stack Overflow

admin管理员组

文章数量:1324848

I have a Javascript that's running on an html form that performs some calculations based on the values the user has entered and then enters the results into some other fields. This is all working well. Here's what the HTML looks like:

<table width="100%" border="0" cellspacing="0" cellpadding="10" class="border" id="calcs">
  <tr class="d_green">
    <td colspan="4">LAST YEAR</td>
    </tr>
  <tr class="l_white">
    <td width="53%">number of instances in the last year </td>
    <td width="13%" align="right"><input name="textfield1" type="text" class="input_b_r" id="textfield1" value="0" /></td>
    <td width="24%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>average number of moderate-risk activity per week in the last year</td>
    <td align="right"><input name="textfield2" type="text" class="input_b_r" id="textfield2" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>average number of hours of high-risk activity per week in the last year</td>
    <td align="right"><input name="textfield3" type="text" class="input_b_r" id="textfield3" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d_green">
    <td colspan="4">NEXT YEAR</td>
  </tr>
  <tr class="l_white">
    <td>expected average number of hours of moderate-risk activity per week next year</td>
    <td align="right"><input name="textfield4" type="text" class="input_b_r" id="textfield4" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>expected average number of hours of high-risk activity per week next year</td>
    <td align="right"><input name="textfield5" type="text" class="input_b_r" id="textfield5" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:31px;"><input type="submit" name="button" id="Calculate" value="Calculate" class="button_calculate" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:105px;">predicted number of instances next year</td>
    <td><input name="textfield6" type="text" class="input_b" id="textfield6" /></td>
  </tr>
  <tr class="l_green">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:105px;">extra instances next year</td>
    <td><input name="textfield7" type="text" class="input_b" id="textfield7" /></td>
  </tr>
</table>

and here's the Javascript:

$(document).ready(function(){

        $('#Calculate').click(function(){

            var IRRC2 = 1.35;
            var IRRC3 = 2.75;

            var Npast = Number($("#textfield1").val());
            var t2hrswk = Number($("#textfield2").val());
            var t3hrswk = Number($("#textfield3").val());
            var t2nexthrswk = Number($("#textfield4").val());
            var t3nexthrswk = Number($("#textfield5").val());

            var t2epyr = t2hrswk * 6 * 52;
            var t3epyr = t3hrswk * 6 * 52;
            var t01epyr = 52 * 7 * 24 * 6 - t2epyr - t3epyr;

            var epochBaseInstances = Npast / (t01epyr + IRRC2 * t2epyr + IRRC3 * t3epyr);

            var baselineCoefficient = Math.log(epochBaseInstances);

            var t2nextepyr = t2nexthrswk * 6 * 52;
            var t3nextepyr = t3nexthrswk * 6 * 52;
            var t01nextepyr = 52 * 7 * 24 * 6 - t2nextepyr - t3nextepyr;

            var predictedInstances = Math.exp(baselineCoefficient) * (t01nextepyr + IRRC2 * t2nextepyr + IRRC3 * t3nextepyr);

            var roundedPredictedInstances = Math.round( predictedInstances * 10 ) / 10;

            var lastYearTotal = Number($("#textfield1").val());

            var extraInstancesRounded = Math.round( (roundedPredictedInstances - lastYearTotal) * 10 ) / 10;

            $('#textfield6').val(roundedPredictedInstances);
            $('#textfield7').val(extraInstancesRounded);
        });
    });

I know need to modify this so that if the value of the first form field (textfield1) is 0 when the user clicks the Calculate button it detects this and then exits, displaying an error message (e.g. "the value for Last Year cannot be zero").

Everything I've tried so far has broken the Javascript - appreciate any assistance with how to proceed.

I have a Javascript that's running on an html form that performs some calculations based on the values the user has entered and then enters the results into some other fields. This is all working well. Here's what the HTML looks like:

<table width="100%" border="0" cellspacing="0" cellpadding="10" class="border" id="calcs">
  <tr class="d_green">
    <td colspan="4">LAST YEAR</td>
    </tr>
  <tr class="l_white">
    <td width="53%">number of instances in the last year </td>
    <td width="13%" align="right"><input name="textfield1" type="text" class="input_b_r" id="textfield1" value="0" /></td>
    <td width="24%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>average number of moderate-risk activity per week in the last year</td>
    <td align="right"><input name="textfield2" type="text" class="input_b_r" id="textfield2" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>average number of hours of high-risk activity per week in the last year</td>
    <td align="right"><input name="textfield3" type="text" class="input_b_r" id="textfield3" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d_green">
    <td colspan="4">NEXT YEAR</td>
  </tr>
  <tr class="l_white">
    <td>expected average number of hours of moderate-risk activity per week next year</td>
    <td align="right"><input name="textfield4" type="text" class="input_b_r" id="textfield4" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>expected average number of hours of high-risk activity per week next year</td>
    <td align="right"><input name="textfield5" type="text" class="input_b_r" id="textfield5" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:31px;"><input type="submit" name="button" id="Calculate" value="Calculate" class="button_calculate" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:105px;">predicted number of instances next year</td>
    <td><input name="textfield6" type="text" class="input_b" id="textfield6" /></td>
  </tr>
  <tr class="l_green">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:105px;">extra instances next year</td>
    <td><input name="textfield7" type="text" class="input_b" id="textfield7" /></td>
  </tr>
</table>

and here's the Javascript:

$(document).ready(function(){

        $('#Calculate').click(function(){

            var IRRC2 = 1.35;
            var IRRC3 = 2.75;

            var Npast = Number($("#textfield1").val());
            var t2hrswk = Number($("#textfield2").val());
            var t3hrswk = Number($("#textfield3").val());
            var t2nexthrswk = Number($("#textfield4").val());
            var t3nexthrswk = Number($("#textfield5").val());

            var t2epyr = t2hrswk * 6 * 52;
            var t3epyr = t3hrswk * 6 * 52;
            var t01epyr = 52 * 7 * 24 * 6 - t2epyr - t3epyr;

            var epochBaseInstances = Npast / (t01epyr + IRRC2 * t2epyr + IRRC3 * t3epyr);

            var baselineCoefficient = Math.log(epochBaseInstances);

            var t2nextepyr = t2nexthrswk * 6 * 52;
            var t3nextepyr = t3nexthrswk * 6 * 52;
            var t01nextepyr = 52 * 7 * 24 * 6 - t2nextepyr - t3nextepyr;

            var predictedInstances = Math.exp(baselineCoefficient) * (t01nextepyr + IRRC2 * t2nextepyr + IRRC3 * t3nextepyr);

            var roundedPredictedInstances = Math.round( predictedInstances * 10 ) / 10;

            var lastYearTotal = Number($("#textfield1").val());

            var extraInstancesRounded = Math.round( (roundedPredictedInstances - lastYearTotal) * 10 ) / 10;

            $('#textfield6').val(roundedPredictedInstances);
            $('#textfield7').val(extraInstancesRounded);
        });
    });

I know need to modify this so that if the value of the first form field (textfield1) is 0 when the user clicks the Calculate button it detects this and then exits, displaying an error message (e.g. "the value for Last Year cannot be zero").

Everything I've tried so far has broken the Javascript - appreciate any assistance with how to proceed.

• javascript
• jquery

Share Improve this question Follow asked Apr 23, 2013 at 2:02 user982124user982124 4,6221717 gold badges7171 silver badges150150 bronze badges 2

• 2 Show one of the things you've tried so far. – Barmar Commented Apr 23, 2013 at 2:03
• It's as simple as value parison with a conditional statement, an alert message, and returning false. – Ohgodwhy Commented Apr 23, 2013 at 2:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try this code, just after the Npast decleration:

var Npast = Number($("#textfield1").val());
if (Npast === 0) {
    alert("the value for Last Year cannot be zero");
    return;
}

Add this conditional statement toward the bottom:

if ( !Npast ) {
    alert('Error!');
    return false;
}

Here's a working demo of the fix: http://jsfiddle/38PGy/

Try this

var last_year = $("#textfield1").val();
if (last_year == 0) {
    alert("The value for Last Year cannot be zero, please enter valid number");
    return;
}

you could try adding validations for your textfields

here is a sample:

$(document).ready(function(){
    $('#Calculate').on('click',function(){
        if (!validateTextField()){
            alert('no zeroes');
        } else {
            alert('zeroes');
        }
    });
});

function validteTextField(){
    //$('input[id^=textfield]') --> selects all input with id having a prefix textfield
    $('input[id^=textfield]').css('background-color','white');
    var flg = false;
    $('input[id^=textfield]').each(function(){
        if ($(this).val() === 0 || $(this).val().length === 0){
            $(this).css('background-color','pink');
            flg = true;
        }            
    });
    return flg;
}

jsFiddle demo

本文标签： jqueryJavascriptcheck form field value and display error message if value is 0Stack Overflow