validation for dynamically created input without using form

Question

i am newbie. i want to validate my dynamically created text fields. unfortunately i couldnt use <form> as i am using it in django. i could have used jquery validator if i had used <form>. now how do i validate these fields. my simple code looks like

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

i want to validate all the fields and if field is empty i want to highlight everything and display error msg under that texbox. in this code i could focus only last textbox. how to do it for all.

Please help me.. thank you

Rahul Patel · Accepted Answer · 2016-09-26 09:16:48Z

isNan is typo error. It should be isNaN.

And please return false in every condition so the script execution will stop there and that particular element will focused.

Please check below snippet for more understanding.

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

Abhishek Dhanraj Shahdeo · Accepted Answer · 2016-09-26 09:09:00Z

Try this,

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

Bharat · Accepted Answer · 2016-09-26 09:11:31Z

0

Try below code this will may be help you out

 $(document).on('click', '#clickbtn',function (){
   //Write your code
})

answered Sep 26, 2016 at 9:11

Bharat

2,4643 gold badges28 silver badges37 bronze badges

4 Comments

Priyanka DL Over a year ago

i tried this, same problem.. only last text box will be focused.. i want all to be focused

Bharat Over a year ago

$("body").on("click", "#clickbtn", function () { });

Bharat Over a year ago

You mean you want to highlight all at same time ?

Priyanka DL Over a year ago

yes.. displaying error msg at the bottom of textbox.. i know focus cannot be done for all the textbox, only one at a time.. but highlight can be done i guess with error msg

Collectives™ on Stack Overflow

validation for dynamically created input without using form

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related