Javascript - 检查表单字段值,如果值为0则显示错误消息

时间:2013-04-23 02:02:02

标签: javascript jquery

我有一个在html表单上运行的Javascript,它根据用户输入的值执行一些计算,然后将结果输入到其他一些字段中。这一切都运作良好。这是HTML的样子:

<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>

这里是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);
        });
    });

我知道需要对此进行修改,以便当用户单击“计算”按钮时,如果第一个表单字段(textfield1)的值为0,则会检测到该值然后退出,显示错误消息(例如&#34;值去年不能为零&#34;)。

到目前为止我尝试过的所有内容都打破了Javascript - 感谢任何有关如何继续的帮助。

4 个答案:

答案 0 :(得分:4)

Npast声明之后尝试此代码:

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

答案 1 :(得分:3)

将此条件语句添加到底部:

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

以下是修复程序的工作演示:http://jsfiddle.net/38PGy/

答案 2 :(得分:2)

试试这个

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

答案 3 :(得分:2)

您可以尝试为文本字段添加验证

这是一个示例:

$(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