Question

我是新手。我想验证我动态创建的文本字段。不幸的是，我无法使用<form>因为我在django中使用它。如果我使用<form>，我可以使用jquery验证器。现在我如何验证这些字段。我的简单代码看起来像

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").click(function(){
    for(var j=0;j<5;j++){
        if($("#name"+j).val() == ""){
                alert(j);
            $("#name"+j).focus();
            $(".errMsg").show();
        }
        if($("#age"+j).val() == ""){
            $("#age"+j).focus();
            $(".errMsg").show();
        }
       if(isNan($("#age"+j).val())){
            $("#age"+j).focus();
            $(".errMsg1").show();
        }
    }
});

});
</script>
</head>
<body>
  <h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div> 
<div class="errMsg">Invalid age</div> 
</body>
</html>

我想验证所有字段，如果字段为空，我想突出显示所有内容并在该texbox下显示错误消息。在这段代码中我只能关注最后一个文本框。如何为所有人做到这一点。

请帮帮我..谢谢

Answer 1

试试这个，

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").on('click', function(){
    for(var j=0;j<5;j++){
    if($("#name"+j).val() == ""){
            alert(j);
        $("#name"+j).focus();
        $(".errMsg").show();
    }
    if($("#age"+j).val() == ""){
        $("#age"+j).focus();
        $(".errMsg").show();
    }
   if(isNan($("#age"+j).val())){
        $("#age"+j).focus();
        $(".errMsg1").show();
    }
}
});

});
</script>
</head>
<body>
<h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div> 
<div class="errMsg">Invalid age</div> 
</body>
</html>

Answer 2

isNan是拼写错误。它应该是isNaN。

请在每种情况下都返回false，这样脚本执行就会停止，并且该特定元素将会聚焦。

请查看以下代码段以获取更多理解。

＆＃13;

$(document).ready(function(){
  $(".errMsg").hide();
  var data = "";
  for(var i =0;i<5;i++){
    data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
  }
  $("#mytable").html(data);
  $("#clickbtn").on('click', function(){
    for(var j=0;j<5;j++){
      if($("#name"+j).val() == ""){
        $("#name"+j).focus();
        $(".errMsg").show();
        return false;
      }
      if($("#age"+j).val() == ""){
        $("#age"+j).focus();
        $(".errMsg").show();
        return false;
      }
      if(isNaN($("#age"+j).val())){
        $("#age"+j).focus();
        $(".errMsg1").show();
        return false;
      }
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div> 
<div class="errMsg">Invalid age</div>

＆＃13;

Answer 3

尝试以下代码，这可能会帮助您

$('#objNr').on('change', function(){
    //Find old dynamic element
    oldEl = $(this).siblings('#elNr');
    if(oldEl.length){
        //Remove old SELECT2 elNr
        $(".elNr").select2('destroy');
        $(".elNr").remove();
    }

验证动态创建的输入而不使用表单

3 个答案: