0
appendChildを使用して行を追加しました。appendChildのフォーム検証
addrowボタンをクリックすると、行が形成されますが、フォームの検証はその行に適用されません。そして今、私はすべての行の検証が必要です。方法をお勧めします。
は、私は多くの問題がここにあります。他のすべてのアドオン行
var counter = 0;
var limit = 0/0;
function addInput(dynamicInput) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<br>User:" + " <input type='text' name='user' id='user'> " +
"Age:" + " <input type='number' name='Age'> " +
"Qualify:" + " <input type='text' name='qualification' id='qual'> " +
"Specilztn:" + " <input type='text' name='specialization' id='spec'> " +
"Percentage:" + " <input type='number' name='percentage' id='perc'> " +
" <input type='submit' id='subtn2'>";
document.getElementById(dynamicInput).appendChild(newdiv);
counter++;
document.getElementById("removerow").style.display = "block";
}
}
function removeInput() {
var x = document.getElementById("dynamicInput");
if (x.hasChildNodes()) {
x.removeChild(x.childNodes[14]);
}
}
function formvalidation() {
var a = document.getElementById("user");
var b = document.getElementById("age");
var c = document.getElementById("qual");
var d = document.getElementById("spec");
var e = document.getElementById("perc");
if (uservalidation()) {
if (agevalidation()) {
if (qualvalidation()) {
if (specvalidation()) {
if (percvalidation()) {
}
else {
return false;
}
}
else {
return false;
}
}
else {
return false;
}
}
else {
return false;
}
}
else {
return false;
}
function uservalidation() {
if (a.value == "") {
document.getElementById("uerr").innerHTML = "Enter UserName";
document.getElementById("user").focus();
return false;
}
else {
document.getElementById("uerr").style.visibility = "hidden";
return true;
}
}
function agevalidation() {
if (b.value == "") {
document.getElementById("agerr").innerHTML = "Enter Age";
document.getElementById("age").focus();
return false;
}
else {
document.getElementById("agerr").style.visibility = "hidden";
return true;
}
}
function qualvalidation() {
if (c.value == "") {
document.getElementById("qerr").innerHTML = "Enter Qualification";
document.getElementById("qual").focus();
return false;
}
else {
document.getElementById("qerr").style.visibility = "hidden";
return true;
}
}
function specvalidation() {
if (d.value == "") {
document.getElementById("sperr").innerHTML = "Enter Specialization";
document.getElementById("spec").focus();
return false;
}
else {
document.getElementById("sperr").style.visibility = "hidden";
return true;
}
}
function percvalidation() {
var addrowbtn = document.getElementById("addrow");
if (e.value == "") {
document.getElementById("pererr").innerHTML = "Enter Percentage";
document.getElementById("perc").focus();
return false;
}
else {
document.getElementById("pererr").style.visibility = "hidden";
addrowbtn.style.display = "block";
}
}
}b{
color:red;
}
#form2{
display:none;
}
#addrow{
display:none;
/* float:right;
margin-top:20px;
margin-right:45px; */
position: absolute;
top: 8px;
right: 75px;
background:green;
color:white;
cursor:pointer;
}
#removerow{
display:none;
background:red;
color:white;
cursor:pointer;
position: absolute;
top: 8px;
right: 5px;
}<form method="post" id="form1" name="form1" onsubmit="return formvalidation()">
<div id="dynamicInput">
User: <input type="text" name="user" id="user">
Age: <input type="number" name="age" id="age">
Qualify: <input type="text" name="qualification" id="qual">
Specilztn:<input type="text" name="specialization" id="spec">
Percentage:<input type="number" name="percentage" id="perc">
<input type="submit" id="sbtn">
<p>
<b id="uerr"> </b>
<b id="agerr"> </b>
<b id="qerr"> </b>
<b id="sperr"> </b>
<b id="pererr"> </b>
</p>
</div>
<input type="button" value="Add Row" id="addrow" onClick="addInput('dynamicInput');">
<input type="button" value="Del Row" id="removerow" onClick="removeInput();">
</form>
をタイトル –