javascript - When data fails first validation, all subsequent submissions fail, even if valid data is submitted -

i working older jsp application. there custom build dojo using modaldialog. user enters application , types information form. when new student needs added enter modal dialog box can add edit list populated database. once changes made can save, (saved database before modal dialog close.) providing pass validation.

when original form completed submit form additional validation. user bypassing validation on edit students page closing modal dialog without saving. pulled updated information (dojo.xhrget) , stored in hidden elements updated/un-altered student information validated on submit.

the div populated hidden html input elements , validate fine. unless user hits submit before viewing/adding/altering information within modaldialog page , receive errors preventing submit. if return modal dialog unable submit, checkboxes not validate true or checked on either page after first failed submit. can add/edit students to/on list , list of students 1 minimum needs "must sign" selected.

i have searched around while have not found same issue having.

stack overflow title "update form fields dojo.xhrget causes dijit.checkbox readonly" attempted change dojo.place() , did not change anything.

i looked @ checkboxes since seems catching validation errors. selected , yet validate false. stack overflow title "my checkbox not check when clicked"

i found seems similar problem, without code examples not sure how move forward changing own code. stack overflow title "struts2 validation - repopulate children when validation fails"

when submit fails validation not load div element returned dojo.xhrget. form fails validation of boolean.

i included relevant section of validation on modal dialog regards student :

<script type="text/javascript">  function validateform() {    //other non-relevant validation page removed example.      var errors = [];     var form = dojo.byid("studentform");      <s:if test="work.isteam">            var index = 0;         var hasstudent = false;         var haspermission = false;          while (true)         {             if (!dojo.byid("student" + index + ".name"))             {                 break;             }              else             {                 hasstudent = true;                 if (form.elements.nameditem("student" + index + ".mustsign").checked == "true")                 {                     haspermission = true;                 }             }             index++;         }         if (!hasstudent)         {             errors[errors.length]="at least 1 student required.";         }         if (!haspermission)         {             errors[errors.length]="at least 1 student must able sign.";         }     </s:if> } <script> 

the main form script open modal dialog , refreshstudents() function called on submit.

<td align="center">     <input type="button" name="checkin" value="complete" onclick="dojo.byid('completing').value='true'; refreshstudents(); validateform();"/> </td> 

the validation identical main page. difference collect value of must sign since text element returned dojo.xhrget

<script type="text/javascript">      function editstudents()      {         try          {             turnoffdojo();              var classid = dojo.byid("classid").value;             var url = "<s:url action='showstudents' namespace='/files' includeparams='none'/>?classid=" + classid;             openmodaldialog("studentsdialog", url, "students", 550, 300);          }         catch (exception)         {             createdojoalert("edit students (error)", exception);         }     }      function refreshstudents()      {         <s:if test="work.isteam">                        var looptr = document.createelement("tr");             looptr.innerhtml="loading data...";               dojo.byid("studentsdiv").innerhtml="";             dojo.byid("studentsdiv").appendchild(looptr);              var classid = dojo.byid("classid").value;             var url = "<s:url action='loadstudents' namespace='/files' includeparams='none'/>?classid=" + classid;              dojo.xhrget({                 preventcache: true,                 url: url,                 load: function(result)                  {                     try                      {                         looptr.innerhtml="";                         dojo.byid("studentsdiv").innerhtml= result;                     }                     catch (exception)                      {                         createdojoalert("refresh students (catch block)","<li>error: " + exception + "</li>");                     }                 },                 error: function(error)                  {                      createdojoalert("refresh students (dojo error)","<li>error: " + error + "</li>");                 }             });         </s:if >     }  <script> 

updates follows:

dom cleanup --removal of use of innerhtml usage in refreshstudents() cause issues getelementbyid(). reference(why "element.innerhtml+=" bad code?) removal of un-necessary variables. added handleas page knows how process response , set timeout.

update html call refreshstudents() when work relevant team work. in instances team work relevant, call validateform() after successful response refreshstudents(). if team work not relevant type of work validateform().

function refreshstudentsandvalidate()  {     <s:if test="work.isteam">                    dojo.byid("studentsdiv").innerhtml="";          var classid = dojo.byid("classid").value;         var url = "<s:url action='loadstudents' namespace='/files' includeparams='none'/>?classid=" + classid;          dojo.xhrget({             url: url,             handleas: "text",             timeout: 10000, //time in milliseconds (10 secs)             load: function(result)              {                 try                  {                     dojo.html.set(dojo.byid("studentsdiv"), result);                     // call validation...                     validateform();                 }                 catch (exception)                  {                     createdojoalert("refresh students (catch block)","<li>error: " + exception + "</li>");                 }             },             error: function(error)              {                  createdojoalert("refresh students (dojo error)","<li>error: " + error + "</li>");             }         });     </s:if > } 

updates html follows, use of struts2:

<td align="center">     <input type="button" class="button" name="checkin" value="complete" onclick="dojo.byid('completing').value='true'; <s:if test="work.isteam"> refreshstudentsandvalidate();</s:if><s:else> validateform(); </s:else>" /> </td> 

in summary, root cause refreshstudents() function. due use of dojo.xhrget making asynchronous request page not receiving response before validation code executed. because need check students cases work team related struts2 if/else added use of appropriate function when user presses button complete work.