Javascript - 检查表单字段值并在值为 0 时显示错误消息答案

【问题标题】：Javascript - check form field value and display error message if value is 0Javascript - 检查表单字段值并在值为 0 时显示错误消息
【发布时间】：2013-04-23 02:02:02
【问题描述】：

我有一个在 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，它会检测到这一点然后退出，并显示一条错误消息（例如“去年的值不能为零”）。

到目前为止，我所做的一切都破坏了 Javascript - 感谢任何有关如何继续的帮助。

【问题讨论】：

显示您迄今为止尝试过的事情之一。
就像用条件语句进行值比较，发出警告信息，返回false一样简单。

标签： javascript jquery

【解决方案1】：

在Npast decleration 之后试试这个代码：

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

【讨论】：

【解决方案2】：

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

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

这是修复的工作演示：http://jsfiddle.net/38PGy/

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

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

这是一个示例：

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

【讨论】：