Question

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

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

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

$(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        
        $(this).prevAll(".errmsg").first().html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

Answer 2

这是我的方法：

$(function(){
  $(".quantity").keypress(function (e) {
	  var name = $(this).prop('name');

     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        $(".errmsg#err-"+name).html("Digits Only").show().fadeOut("slow");
		return false;
    }
   });
});

function show_confirm(){}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post" name="data" action="  ">
     Amount:  <span class="errmsg" id="err-amount"></span><br>
     <input type="text" name="amount" class="quantity" /><br><br>
     
     Interest:  <span class="errmsg" id="err-interest"></span><br>
     <input type="text" name="interest" class="quantity" /><br><br>
     
     Duration: <span class="errmsg" id="err-duration"></span><br>
     <input type="text" name="duration" class="quantity" /><br><br>
     
     <input type="submit" name='submit'  onclick="show_confirm()" value="SUBMIT"> 
</form>

我为每条错误消息创建了一个id（我使它们与输入的name属性相同）。然后我得到了这个名字，并用它来动态查找错误信息的id。

Answer 3

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

＆＃13;

$(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;
    }
   });
});

＆＃13;

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

＆＃13;

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

3 个答案: