jQuery在表单输入下放置错误？

您好，我刚刚开始使用jQuery，我可以用一只手来完成一个项目

我们正在设置一个预算助手，其中将有大约20个项目列表，每个项目旁边都有一个文本框。然后在一个跨度的底部会显示总数

我非常接近这里，但我想让错误显示在每个文本输入的下方，而不是底部

我相信这是可能的，但我还没有弄清楚怎么做。我一直在网上寻找修复方法，但到目前为止运气不好

有人能看一下让我知道吗

我将非常感谢您的帮助

 <div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<div>
    <div width="40px">1</div>
    <div>Butter</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>2</div>
    <div>Cheese</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>3</div>
    <div>Eggs</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>4</div>
    <div>Milk</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>5</div>
    <div>Bread</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div>
    <div>6</div>
    <div>Soap</div>
    <div><input class="txt" type="text" name="txt"/></div>
</div>
<div id="summation">
    <div>&nbsp;</div>
    <div align="right">Sum :</div>
    <div align="center"><span id="sum">0</span></div>
</div>
 </div>



 <script>
$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));
}
 </script>

1.
黄油
2.
奶酪
3.
鸡蛋
4.
牛奶
5.
面包
6.
香皂
总数：
0
$（文档）.ready（函数（）{
//遍历每个文本框并添加keyup
//触发总和事件的处理程序
$（“.txt”）。每个（函数（）{
$（this）.keyup（function（）{
计算um（）；
});
});
});
函数calculateSum（）{
var总和=0；
//遍历每个文本框并添加值
$（“.txt”）。每个（函数（）{
//仅当值为number时添加
如果（！isNaN（this.value）&&this.value.length！=0）{
sum+=parseFloat（此.value）；
}
});
//.toFixed（）方法将最终总和舍入到小数点后2位
$（“#sum”）.html（sum.toFixed（2））；
}

根据您可能正在做的事情，我做了一些猜测。我想你只需要输入数字，但可以是Int或Float。例2或4.95。但当输入任何其他字符且不应执行计算时，应出现错误。见工作示例：

HTML

<div width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <div class="itemWrap">
    <div>1</div>
    <label>Butter</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>2</div>
    <label>Cheese</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>3</div>
    <label>Eggs</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>4</div>
    <label>Milk</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>5</div>
    <label>Bread</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div class="itemWrap">
    <div>6</div>
    <label>Soap</label>
    <input class="txt" type="text" name="txt[]" />
  </div>
  <div id="summation" class="itemWrap">
    <div>&nbsp;</div>
    <label style="text-align: right;">Sum :</label>
    <div style="width: 50px; text-align: center;"><span id="sum">0.00</span></div>
  </div>
</div>

JQuery

$(document).ready(function() {
  $(".txt").keyup(function(e) {
    var key = String.fromCharCode(e.which);
    console.log("Key Code:", e.which, "Key:", key);
    if (parseInt(key) || e.which == 8 || e.which == 9 || e.which == 190) {
      $(this).parent(".itemWrap").removeClass("error");
      calculateSum();
    } else {
      $(this).parent(".itemWrap").addClass("error");
    }
  });
});

function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function(k, v) {
    //add only if the value is number
    if (!isNaN($(v).val()) && $(v).val().length != 0) {
      sum += parseFloat($(v).val());
    }
  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

我只根据个人喜好和经验对HTML进行了调整。例如，我添加了一些CSS。JQuery是您真正想要的

由于您使用的是

onKeyUp

，因此我抓取了

事件

，以便查看按下的键。我将字符码转换为击键（例如：65->a）。然后我可以使用

parseInt（）

查看击键是字母还是数字。我还想允许Tab、Delete和“.”，您将看到在比较中添加的选项。如果所有条件都满足，我将删除

error

类，以防前面的条目生成错误，然后运行计算

希望有帮助

评论后更新

增加了以下内容：

  <div class="itemWrap">
    <div>1</div>
    <label>Butter</label>
    <input class="txt" type="text" name="txt[]" />
    <div class="errorText">Must be a number</div>
  </div>

1.
黄油
一定是一个数字

---

现在你可以添加你喜欢的文本了。然后根据需要使用

.show（）

和

.hide（）

。我还通过

高度增加了空间：2.5em。
设置此小提琴进行测试：从您的描述中不清楚到底是什么不起作用。你说的只是页面的格式吗？它正在工作，我想把错误移到表单下。我更新了JSFIDLE以向您展示。我已经有一段时间没用了，但我可以在这里看到。我找不到你的更新。当你更新它时，它可能已经分叉了。请用你更新的URL评论。还有，你说的“错误”是什么意思。你的脚本没有表明它生成了错误。这是正确的想法！是否有可能删除红色笔划，并在下面添加一个文本徽标，就像我发送的蓝色背景一样？让你提供的新标签保持原色，我这边是红色。我把屏幕盖送来了。非常感谢你在这方面的帮助！我觉得现在一切都很好。有没有办法在这里删除NaN标记？我哪儿也看不到@Biggy从屏幕截图上看不清楚你在做什么。我建议你仔细看看你在做什么，或者提出一个新问题。如果我已经回答了您的原始问题，我希望它对您有所帮助，您将投票并将其标记为答案。@Biggy因为如果输入空格或字母，我不会执行
calculateSum（）
，所以不会发生任何事情。看看我的答案，这是可以防止的。
  <div class="itemWrap">
    <div>1</div>
    <label>Butter</label>
    <input class="txt" type="text" name="txt[]" />
    <div class="errorText">Must be a number</div>
  </div>