javascript - Jquery 错误消息显示在每个字段上

Question

我有一个 html 表单，在某些字段中只需要提交数字。如果输入文本，则会显示错误消息。它的工作没有达到标准。在三个字段中，如果有人输入任何文本，则会在所有三个字段中显示错误消息。

我想要的是 - 显示当前字段而不是所有字段的错误消息。

Jquery 代码是:

$(document).ready(function () {
  //called when key is pressed in textbox
  $(".quantity").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $(".errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

HTML 代码是:

<form method="post" name="data" action="  ">
     Amount:  <span class="errmsg"></span><br>
     <input type="text" name="amount" class="quantity" /><br><br>
     Interest:  <span class="errmsg"></span><br>
     <input type="text" name="interest" class="quantity" /><br><br>
     Duration: <span class="errmsg"></span><br>
     <input type="text" name="duration" class="quantity" /><br><br>
     <input type="submit" name='submit'  onclick="show_confirm()" value="SUBMIT"> 
</form>

Answer 1

可以使用.prev()选择输入之前的错误消息范围

$(document).ready(function () {
  //called when key is pressed in textbox
  $(".quantity").keypress(function (e) {
    var elem =$(this);
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        elem.prev().prev(".errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The HTML CODE is:

<form method="post" name="data" action="  ">
     Amount:  <span class="errmsg"></span><br>
     <input type="text" name="amount" class="quantity" /><br><br>
     Interest:  <span class="errmsg"></span><br>
     <input type="text" name="interest" class="quantity" /><br><br>
     Duration: <span class="errmsg"></span><br>
     <input type="text" name="duration" class="quantity" /><br><br>
     <input type="submit" name='submit'  onclick="show_confirm()" value="SUBMIT"> 
</form>