要素が存在する場合、javascriptフォームの妥当性確認

Question

私はフォームの検証を行い、DOMを動的に作成しますが、エラーを作成するために送信ボタンを押すと、要素を1回ではなく複数回呼び出します。では、どうすればそれを一度呼び出すことができますか？私は少しこれで失われた。

Javascriptを：

function validateForm(){ 
var xfields=document.forms["form1"]["amt"].value; 
if (xfields==null || xfields==""){ 
    var errortag = document.createElement('label'); 
    var realinput = document.getElementById('amt'); 
    var errortagname = 'error'; 
    errortag.setAttribute('class',errortagname); 
    errortag.innerHTML = 'Amount of loan needed'; 
    var adddiv = document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling); 
    if(adddiv === true){ 
     document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling); 
    return false; 
     }else{ 
     xfields.remove('errortag'); 
    } 
} 
    return true; 
} 

HTML

<div id="st-widget" style=" width: 393px; padding-bottom: 0;"> 
<form class="ui-form ui-widget-form" id="short_form" method="get" name="form1" target="_blank" onsubmit="return validateForm()"> 
     <input type="hidden" > <input id="scl" name="scl" type="hidden" value=""> 
     <input name="optInQ" type="hidden" value="t"> 
     <input name="inplst" type="hidden" value="BSGAEOZ"> 

    <div class="grad-date" style="clear:left; #width:138px;"> 
     <label for="gradDate">When will you graduate?</label> 
      <select id="gradDate" name="gradDate" style="width:46px !important;" tabindex="10" title="Month"> 
       <option selected="selected" value="">Month</option> 
       <option value="January">January</option> 
       <option value="February">February</option> 
       <option value="March">March</option> 
       <option value="April">April</option> 
       <option value="May">May</option> 
       <option value="June">June</option> 
       <option value="July">July</option> 
       <option value="August">August</option> 
       <option value="September">September</option> 
       <option value="October">October</option> 
       <option value="November">November</option> 
       <option value="December">December</option> 
      </select> 
      <select id="grad-month" name="gradDate" style="width:46px !important;" tabindex="15" title="Year"> 
       <option selected="selected" value="">Year</option> 
       <option value="2011">2011</option> 
       <option value="2012">2012</option> 
       <option value="2013">2013</option> 
       <option value="2014">2014</option> 
       <option value="2015">2015</option> 
       <option value="2016">2016</option> 
       <option value="2017">2017</option> 
      </select> 
    </div> 
    <div id="amtloan" class="amount"> 
     <label for="amt">Amount of loan needed?</label> 
      <input class="amt-input required" id="amt" name="amt" style="width:137px;" tabindex="20" title="Amount of loan needed" type="text" value=""> 
    </div> 
    <div class="ui-form-action" style="margin-top:18px;"> 
     <button class="ui-btn button" id="" name="go" tabindex="35" title="GO" type="submit" value="Submit"> 
     <span class="ui-btn-ctn medium">Continue </span> 
    </button> 
</div> 
</form></div></div> 

Answer 1

このライン

var adddiv = document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling); 

はerrortagあなたが検証関数を呼び出すたびに挿入されます。試してみてください

//...  
    var adddiv = document.getElementsByClassName(errortagname).length == 0; 
    if(adddiv === true){ 
     document.getElementById('amtloan').insertBefore(errortag, realinput.nextSibling); 
    } 
    return false; 
} 

else句はどうするのかよくわかりません。

改善の余地はたくさんありますが、Stackoverflowはコードを詳細に議論する適切な場所ではないと思います。