wie URL in dynamisch hinzugefügtem Textfeld

validieren, wie URL zu überprüfen ist korrekt oder nicht, wenn ich in dynamisch hinzugefügtem Textfeld einsteigen werde.wie URL in dynamisch hinzugefügtem Textfeld

Hier wird T3 als ID des Eingabe-Tags angegeben, aber das funktioniert nur für die erste dynamisch hinzugefügte Textbox, nicht für andere.

Wie validiert man eine andere URL in der nächsten dynamisch hinzugefügten Textbox?

<script type="text/javascript"> 
function GetDynamicTextBox(value){ 
return '<Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enter the URL : </label>' + 
'<input name = "habits" type="text" id = "t3" value = "' + value + '" />' + 
     '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick = "RemoveTextBox(this)" /><br><br>' 
} 
function AddTextBox() { 
var div = document.createElement('DIV'); 
div.innerHTML = GetDynamicTextBox(""); 
document.getElementById("TextBoxContainer").appendChild(div); 
} 

function RemoveTextBox(div) { 
document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
} 

function RecreateDynamicTextboxes() { 
var values = eval('<%=Values%>'); 
if (values != null) { 
    var html = ""; 
    for (var i = 0; i < values.length; i++) { 
     html += "<div>" + GetDynamicTextBox(values[i]) + "</div>"; 
    } 
    document.getElementById("TextBoxContainer").innerHTML = html; 
} 
} 
window.onload = RecreateDynamicTextboxes; 
</script> 



<html> 
<head> 
<title>T-SUMM</title> 


<script type="text/javascript"> 

     function check() 
     { 
      if (document.getElementById('t1').value=="" 
      || document.getElementById('t1').value==undefined) 
      { 
       alert ("Please Enter a Query"); 
       return false; 
      }     

      var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/; 
      if(!regex .test(document.getElementById('t2').value)||!regex .test(document.getElementById('t3').value)) 
      { 
        alert("Please enter valid URL."); 
        return false; 
      } 

      return true; 
     } 

    </script> 

</head> 
<body> 

<center> 
<form method="Post" action="./result.jsp"> 
<table> 
<br><br><Label> Enter a Query : &nbsp;</label> 
<input name='habits' id='t1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><br> 
<Label>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter the URL : </label> 
<input name='habits' id='t2'> 
&nbsp;&nbsp;<input id="btnAdd" type="button" value="add another URL"  onclick="AddTextBox()" /><br><br> 
<div id="TextBoxContainer"> 
<!--Textboxes will be added here --> 
</div> 

<input type="submit" name="submit" onclick="return check();"> 

</table> 
</form> 


</body> 
</html>

Quelle

2017-03-17 sanjay gupta

Seine Frage ist mit dem Hinzufügen der Validierung für dynamisch hinzugefügte Elemente ... Es geht nicht nur um URL-Validierung. @gyre –

HTML - index.html

<html> 
<head> 
<title>T-SUMM</title> 

<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript"> 

     function check() 
     { 



      if (document.getElementById('t1').value=="" 
      || document.getElementById('t1').value==undefined) 
      { 
       alert ("Please Enter a Query"); 
       return false; 
      }     

      var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/; 
      var boxes = document.getElementsByTagName('input'); 
      for(i = 0; i < boxes.length; i++) { 
       if(boxes[i].type == "text" && boxes[i].className==="urls" && !regex.test(boxes[i].value)) { 
        alert("Please enter valid URL. Error in Text Box "+boxes[i].value); 
        return false; 
       } 
      } 

      return true; 
     } 

    </script> 

</head> 
<body> 

<center> 
<form method="Post" action="./result.jsp"> 
<table> 
<br><br><Label> Enter a Query : &nbsp;</label> 
<input name='habits' id='t1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br><br> 
<Label>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter the URL : </label> 
<input name='habits' class="urls" id='t2'> 
&nbsp;&nbsp;<input id="btnAdd" type="button" value="add another URL"  onclick="AddTextBox()" /><br><br> 
<div id="TextBoxContainer"> 
<!--Textboxes will be added here --> 
</div> 

<input type="submit" name="submit" onclick="return check();"> 

</table> 
</form> 


</body> 
</html>

JS - script.js

function GetDynamicTextBox(value){ 
return '<Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enter the URL : </label>' + 
'<input name = "habits" type="text" class="urls" value = "' + value + '" />' + 
     '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Remove" onclick = "RemoveTextBox(this)" /><br><br>' 
} 
function AddTextBox() { 
var div = document.createElement('DIV'); 
div.innerHTML = GetDynamicTextBox(""); 
document.getElementById("TextBoxContainer").appendChild(div); 
} 

function RemoveTextBox(div) { 
document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
} 

function RecreateDynamicTextboxes() { 
var values = eval('<%=Values%>'); 
if (values != null) { 
    var html = ""; 
    for (var i = 0; i < values.length; i++) { 
     html += "<div>" + GetDynamicTextBox(values[i]) + "</div>"; 
    } 
    document.getElementById("TextBoxContainer").innerHTML = html; 
} 
} 
window.onload = RecreateDynamicTextboxes;

Quelle

2017-03-17 06:09:24

Vielen Dank –

Ich glaube, Sie können zunächst versuchen, eine "onchange" Handler zum "TextBoxContainer" div hinzufügen und user event.target oder event.srcElement, um festzustellen, ob es sich um ein Textfeld handelt, das das Ereignis "onchange" ausgelöst hat. Wenn das Trigger-DOM genau das ist, was Sie wollen, können Sie versuchen, seinen Wert zu validieren, und wenn dies nicht der Fall ist, müssen Sie nichts tun. Wenn dies erledigt ist, werden die übrigen Dinge einfach dem Container-Element hinzugefügt/entfernt. Unten sind einige Beispielcodes, die helfen können:

<script type="text/javascript"> 
    var _container = document.getElementById('TextBoxContainer'); 
    function add(){ 
     var _txt = document.createElement("INPUT"); 
     _txt.type = "text"; 
     _container.appendChild(_txt); 
    } 

    _container.onchange = function(event){ 
     var _dom = event.target || event.srcElement; 
     if(_dom && _dom.tagName === "INPUT" && _dom.type === "text"){ 
      //alert(_dom.value); 
      //You can validate the dom value here 
     } 
    }; 

    document.getElementById('add').onclick=function(){ 
     add(); 
    }; 
</script>

Quelle

2017-03-17 06:14:49

wie URL in dynamisch hinzugefügtem Textfeld

Antwort

Verwandte Themen