在不使用表单的情况下验证动态创建的输入

validation for dynamically created input without using form

本文关键字：验证 动态 创建 输入 情况下 表单      更新时间：2023-09-26

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

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

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

请帮帮我…谢谢你

isNan是打字错误。应该是isNaN

并且请在每个条件下都返回false，这样脚本执行将在那里停止，并且特定的元素将集中。

请查看下面的代码片段以获得更多的理解。

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

试试这个，

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

试试下面的代码，这可能会对你有所帮助

 $(document).on('click', '#clickbtn',function (){
   //Write your code
})
相关文章：