Question

Im making a form validation and im creating a dom dynamically but when I press the submit button to create the error it is calling the element multiple times instead of once. So how can I make it call it once? Im a little lost on this one.

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

This line

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

causes the errortag to be inserted every time you call the validator function. Try

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

Not sure what the else clause is supposed to do though.

There is a lot of potential for improvement, but I think Stackoverflow is not the right place to discuss the code in great detail.