title: How to write validations in Javascript for Document type model.?
body: <p>This peice of HTML code is a representation of simple table created with 9 columns. The area specific to problem is marked in bold.</p>
  
  <pre><code>&lt;div id="insertDiv" class="row-fluid" style="display:none;"&gt;
          &lt;div class="row" style="margin-left:0px;"&gt;
              &lt;div class="col-12"&gt;
                  &lt;div class="widget-box"&gt;
                      &lt;div class="widget-content nopadding"&gt;
                          &lt;table id="tblQuestion" class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;QSerial&lt;/th&gt;
                                      &lt;th&gt;QGroup&lt;/th&gt;
                                      &lt;th&gt;Question&lt;/th&gt;
                                      &lt;th&gt;Description&lt;/th&gt;
                                      &lt;th&gt;AnswerType&lt;/th&gt;
                                      &lt;th&gt;ManualEntry&lt;/th&gt;
                                      &lt;th&gt;ScriptName&lt;/th&gt;
                                      &lt;th&gt;ParameterString&lt;/th&gt;
                                      &lt;th&gt;ValidFrom&lt;/th&gt;
                                      &lt;th&gt;ValidTill&lt;/th&gt;
                                      &lt;th&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="insertBody"&gt;
  
                                  &lt;tr id="tablerow0"&gt;
                                      &lt;td&gt;&lt;input style="max-width:50px;" type="text" id="txtQserial0" placeholder="Qserial" required="required" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input style="max-width:100px;" type="text" id="txtGroup0" placeholder="QGroup" required="required" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;textarea style="max-width:110px;" type="text" id="txtQuestion0" placeholder="Question" required="required"&gt;&lt;/textarea&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;textarea style="max-width:110px;" type="text" id="txtDescription0" placeholder="Description" required="required"&gt;&lt;/textarea&gt;&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;select style="max-width:110px;" id="ddlAnswerType0"&gt;
                                              @*Anshumaan Checking for insert functionality*@
                                              &lt;option value="S" selected&gt;Select Any&lt;/option&gt;
                                              &lt;option value="N"&gt;Number&lt;/option&gt;
                                              &lt;option value="T"&gt;Text&lt;/option&gt;
                                              &lt;option value="C"&gt;CheckBox&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/td&gt;
                                      **&lt;td&gt;&lt;input style="max-width:50px;" type="checkbox" id="chkManualEntryChkBox0" onclick="addEventListenerForNewCLCode(count)"/&gt;&lt;/td&gt;**                                    
                                      &lt;td&gt;&lt;textarea style="max-width:110px;" type="text" placeholder="Script Name" id="txtScriptName0"&gt;&lt;/textarea&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;textarea style="max-width:110px;" type="text" placeholder="Parameter String" id="txtParameterString0"&gt;&lt;/textarea&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input style="max-width:140px;" type="date" placeholder="Parameter String" id="validFrom0" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;input style="max-width:140px;" type="date" placeholder="Parameter String" id="validTill0" /&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;i id="addNewRow" style="cursor: pointer;color:grey; font-size: 25px;padding: 2px; display:block;" class="fas fa-plus-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col" id="btnGroup" style="display:none;"&gt;
                  &lt;div class="row" style="margin-left:0px;"&gt;
                      &lt;div class="col"&gt;
                          &lt;input type="button" class="btn btn-success" data-dismiss="modal" onclick="saveAllQuestions()" value="Save" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>then i have the corresponding method which is triggered when button for save is clicked.</p>
  
  <pre><code> function saveAllQuestions() {
          var questions = new Array();
          var alertCount = 0;
          var counter = 0;
          $("#tblQuestion TBODY TR").each(function () {
              var row = $(this);
              var question = {};
              debugger;
              question.CLCode = document.getElementById('valCLCode').value;
              question.QSerial = document.getElementById("txtQserial" + counter).value;
              question.QGroup = document.getElementById("txtGroup" + counter).value;
              question.Question = document.getElementById("txtQuestion" + counter).value;
              question.Description = document.getElementById("txtDescription" + counter).value;
              //var selectedAnswerType = $('#ddlAnswerType' + counter + " : selected").val();
              var selectElement = document.querySelector('#ddlAnswerType' + counter);
              var output = selectElement.options[selectElement.selectedIndex].value;
              question.SelectedAnswerType = output;
              question.ManualEntry = document.getElementById("chkManualEntryChkBox" + counter).checked;
              if (question.ManualEntry == true) {
                  document.getElementById('txtScriptName' + counter).disabled = true;
                  document.getElementById('txtParameterString' + counter).disabled = true;
              }
              else if (question.ManualEntry == false) {
                  document.getElementById('txtScriptName' + counter).disabled = false;
                  document.getElementById('txtParameterString' + counter).disabled = false;
              question.ScriptName = document.getElementById("txtScriptName" + counter).value;
              question.ParameterString = document.getElementById("txtParameterString" + counter).value;
              }  
  
  
              //question.CreatedOn = new Date();
              //question.ModifiedOn = new Date();
              question.ValidFrom = document.getElementById("validFrom" + counter).value;
              question.ValidTill = document.getElementById("validTill" + counter).value;
              **if (question.ValidFrom &gt; question.ValidTill) {
                  alert("Valid FROM date cannot be greater than Valid TILL date!");
                  alertCount++;
                  document.getElementById('validFrom' + counter).style.borderColor = "red";
                  document.getElementById('validTill' + counter).style.borderColor = "red";
                  //onAddClCode();
              }
  
              else if (question.ValidTill &lt; question.ValidFrom) {
                  alert("Valid Till date cannot be less than Valid From Date!");
                  alertCount++;
                  document.getElementById('validFrom' + counter).style.borderColor = "red";
                  document.getElementById('validTill' + counter).style.borderColor = "red";
                 // onAddClCode();
              }**
  
              question.AnswerType = output;
              question.CreModUser = @Session["UserId"];
              questions.push(question);
  
              counter++;
          });
  
          //Send the JSON array to Controller using AJAX.
          $.ajax({
              type: "POST",
              url: "/ChurnFB/InsertQuestionnarie",
              beforeSend: function (xhr) {
                  if (alertCount != 0) {
                      alert("Check your Entries before proceeding");
                      document.getElementById('validFrom' + counter).style.borderColor = "red";
                      xhr.abort();
                     //document.getElementById("insertDiv").style.display = "block";
                  }
              },
              data: JSON.stringify(questions),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (r) {
                  alert(r + " record(s) inserted.");
              }
          });
  
  
      }
  </code></pre>
  
  <p>The problem that i am facing i do not how to stop this ajax call from hitting my action method in controller and whatever entries are there should remain intact and the user should be able to change the problem entry  (dates in this case.) Also if the user is clicking save button without entering any data all filed should be marked red. I have tried abort but i don't think it will work here.</p>