Как отобразить данные формы на той же странице, когда они действительны только?

Question

Я работаю над простым заданием, которое создает форму, которая принимает оценки и имя, а затем отображает каждую оценку отдельно с указанием ее значения и итоговой оценки. Я создал это, не используя элемент формы, и он работал совершенно нормально, но проблема заключалась в правильности, например, если будут вставлены отрицательные числа, он все равно будет вычисляться. Я должен изменить код, чтобы он отображал сообщение проверки пользователю, чтобы показать, что некоторые значения не введены правильно или отсутствуют, однако программа не работает должным образом, так как ничего не отобразит. Я удалил элемент формы, поэтому он по-прежнему будет отображать сообщение проверки, но также будет вычислять пустые поля и отображать сообщение. Я создал функции для вызова друг друга и проверки перед отображением, но я все еще получил ошибку. Как я могу это сделать, когда пользователь нажимает кнопку «Отправить», он не будет отправлять или отображать что-либо, пока не будут введены все действительные данные? и тогда, если все это верно, он покажет результаты? Вот мой код, надеюсь, вы, ребята, можете помочь. Ps: В моем коде так много функций, которые я тестировал, поэтому, пожалуйста, отбросьте беспорядок, и я надеюсь, что вы можете помочь. Спасибо!

var x = 1;
var gradesArray = [];
var sum = 0;

var dict = [{
  grade: 94,
  message: ' is, A, excellent'
}, {
  grade: 90,
  message: ' is A-, great job'
}, {
  grade: 87,
  message: ' is B+, great'
}, {
  grade: 84,
  message: ' is, B, amazing'
}, {
  grade: 80,
  message: ' is, B-, study little more'
}, {
  grade: 77,
  message: ' is C+, you could do better'
}, {
  grade: 74,
  message: ' is C',
  70: ' is, C-'
}, {
  grade: 67,
  message: ' is D+'
}, {
  grade: 60,
  message: ' is D-'
}];


function gradeCheck(sum) {
  for (let i = 0; i < dict.length; i++) {
    if (sum >= dict[i].grade) {
      return dict[i].message;
    } else if (sum < 60) {
      return ' F, its a fail';
    }
  }
}

function gradeCal() {
  const elemnts = document.querySelectorAll('.grade-calculator input[type=number]')
  //var sum = 0;
  var x = 1;
  for (let element of elemnts) {
    gradesArray[x] = Number(element.value);
    sum += Number(element.value);
    x++;
  }
  pageResults(sum);
  //return false;
}


function pageResults(sum) {
  for (var i = 1; i < gradesArray.length; i++) {
    console.log(gradesArray[i]);
    document.getElementById(i.toString()).innerHTML = (gradesArray[i]).toString();
  }

  var nameS = document.getElementById("name").value;
  document.getElementById("AG").innerHTML = nameS + " your grade is: " + (sum / 4) + "  " + gradeCheck((sum / 4));
  showResults();
}


function showResults() {
  let fp = document.getElementById('formPage');
  let rp = document.getElementById('result');

  if (fp.style.display == '') {
    fp.style.display = 'none';
    rp.style.display = 'block';
  }
}

/* function validateForm(event) {
           gradeCal();
       }
        //I created this function so it 
        function process(){
    
           var nameV = document.getElementById('name').value,
               errors = 0;
            
           for(var i=0; i<gradesArray.length; i++){
               i <= 4? (gradesArray[i] > 0) && (gradesArray[i] < 26) ? errors += 0: errors +=1 : gradesArray[i] > 0 && gradesArray[i] < 100? errors += 0 : errors +=1;
           }
           if(nameV =='' && errors > 0){
               event.preventDefault();

           }else{
               pageResults(sum);
           }
       }
        */

<form>
  <p id='formPage' style="display:">
    <h2>Grade calculator</h2>
    <p class="form-example">
      <label for="name">Enter your name: </label>
      <input type="text" name="name" id="name" maxlength="10" required pattern="[A-Z][A-Za-z' -]+">
    </p>
    <p class="grade-calculator">
      <h3>Insert assignment grades</h3>
      <p class="assignment-Grd">
        <label for="assignment">Enter your assignment grade: </label>
        <p>
          <input type="number" name="assignment1" id="inputSpace1" min="0" max="25" placeholder="First Assignment" required pattern="\d+">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace2" min="0" max="25" placeholder="Second Assignment" required pattern="\d+">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace3" min="0" max="25" placeholder="Third Assignment" required pattern="\d+">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace4" min="0" max="25" placeholder="Fourth Assignment" required pattern="\d+">
          <span class="validity"></span>
        </p>
      </p>
      <p>
        <label for="assignment">Enter midtem grade: </label>
        <input type="number" name="midterm" id="inputSpace5" min="0" max="100" placeholder="midterm grade" required pattern="\d+">
        <span class="validity"></span>
      </p>
      <p>
        <label for="assignment">Enter Finam exam grade: </label>
        <input type="number" name="finalEx" id="inputSpace6" min="0" max="100" placeholder="final grade" required pattern="\d+">
        <span class="validity"></span>
      </p>
      <p>
        <label for="assignment">Enter project grade: </label>
        <input type="number" name="finalProj" id="inputSpace7" min="0" max="100" placeholder="Project grade" required pattern="\d+">
        <span class="validity"></span>
      </p>
      <p class="form-example">
        <button id="submitB" onclick="gradeCal()">Submit</button>
        <button onclick="reset()">Cancel</button>
      </p>
    </p>
  </p>
</form>
<div id="result" style="display: none">
  <h3>The results</h3>
  <div>First Assignment:
    <p class='gradeStyle' id="1"></p>
  </div>
  <div>Second Assignment:
    <p class='gradeStyle' id="2"></p>
  </div>
  <div>Third Assignment:
    <p class='gradeStyle' id="3"></p>
  </div>
  <div>Fourth Assignment:
    <p class='gradeStyle' id="4"></p>
  </div>
  <div>Midterm Exam Grade:
    <p class='gradeStyle' id="5"></p>
  </div>
  <div>Final Exam Grade:
    <p class='gradeStyle' id="6"></p>
  </div>
  <div>Project Grade:
    <p class='gradeStyle' id="7"></p>
  </div>
  <div>Average Grade:
    <p class='gradeStyle' id="AG"></p>
  </div>
</div>

Answer 1

Вы можете использовать такую ​​простую функцию:

function validateGrade(inputBox) {
  if(inputBox.value<0) 
    inputBox.nextElementSibling.innerHTML = "Value cannot be less than 0";
}

И использовать событие onchange для каждого текстового поля:

onchange="validateGrade(this)"

Примерно так:

var x = 1;
var gradesArray = [];
var sum = 0;

var dict = [{
  grade: 94,
  message: ' is, A, excellent'
}, {
  grade: 90,
  message: ' is A-, great job'
}, {
  grade: 87,
  message: ' is B+, great'
}, {
  grade: 84,
  message: ' is, B, amazing'
}, {
  grade: 80,
  message: ' is, B-, study little more'
}, {
  grade: 77,
  message: ' is C+, you could do better'
}, {
  grade: 74,
  message: ' is C',
  70: ' is, C-'
}, {
  grade: 67,
  message: ' is D+'
}, {
  grade: 60,
  message: ' is D-'
}];


function gradeCheck(sum) {
  for (let i = 0; i < dict.length; i++) {
    if (sum >= dict[i].grade) {
      return dict[i].message;
    } else if (sum < 60) {
      return ' F, its a fail';
    }
  }
}

function gradeCal() {
  const elemnts = document.querySelectorAll('.grade-calculator input[type=number]')
  //var sum = 0;
  var x = 1;
  for (let element of elemnts) {
    gradesArray[x] = Number(element.value);
    sum += Number(element.value);
    x++;
  }
  pageResults(sum);
  //return false;
}


function pageResults(sum) {
  for (var i = 1; i < gradesArray.length; i++) {
    console.log(gradesArray[i]);
    document.getElementById(i.toString()).innerHTML = (gradesArray[i]).toString();
  }

  var nameS = document.getElementById("name").value;
  document.getElementById("AG").innerHTML = nameS + " your grade is: " + (sum / 4) + "  " + gradeCheck((sum / 4));
  showResults();
}


function showResults() {
  let fp = document.getElementById('formPage');
  let rp = document.getElementById('result');

  if (fp.style.display == '') {
    fp.style.display = 'none';
    rp.style.display = 'block';
  }
}

function validateGrade(inputBox) {
  if(inputBox.value<0) 
    inputBox.nextElementSibling.innerHTML = "Value cannot be less than 0";
}

/* function validateForm(event) {
           gradeCal();
       }
        //I created this function so it 
        function process(){
    
           var nameV = document.getElementById('name').value,
               errors = 0;
            
           for(var i=0; i<gradesArray.length; i++){
               i <= 4? (gradesArray[i] > 0) && (gradesArray[i] < 26) ? errors += 0: errors +=1 : gradesArray[i] > 0 && gradesArray[i] < 100? errors += 0 : errors +=1;
           }
           if(nameV =='' && errors > 0){
               event.preventDefault();

           }else{
               pageResults(sum);
           }
       }
        */

.validity {
  color:red;
}

<form>
  <p id='formPage' style="display:">
    <h2>Grade calculator</h2>
    <p class="form-example">
      <label for="name">Enter your name: </label>
      <input type="text" name="name" id="name" maxlength="10" required pattern="[A-Z][A-Za-z' -]+">
    </p>
    <p class="grade-calculator">
      <h3>Insert assignment grades</h3>
      <p class="assignment-Grd">
        <label for="assignment">Enter your assignment grade: </label>
        <p>
          <input type="number" name="assignment1" id="inputSpace1" min="0" max="25" placeholder="First Assignment" required pattern="\d+" onchange="validateGrade(this)">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace2" min="0" max="25" placeholder="Second Assignment" required pattern="\d+" onchange="validateGrade(this)">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace3" min="0" max="25" placeholder="Third Assignment" required pattern="\d+" onchange="validateGrade(this)">
          <span class="validity"></span>
        </p>
        <p>
          <input type="number" name="assignment2" id="inputSpace4" min="0" max="25" placeholder="Fourth Assignment" required pattern="\d+" onchange="validateGrade(this)">
          <span class="validity"></span>
        </p>
      </p>
      <p>
        <label for="assignment">Enter midtem grade: </label>
        <input type="number" name="midterm" id="inputSpace5" min="0" max="100" placeholder="midterm grade" required pattern="\d+" onchange="validateGrade(this)">
        <span class="validity"></span>
      </p>
      <p>
        <label for="assignment">Enter Finam exam grade: </label>
        <input type="number" name="finalEx" id="inputSpace6" min="0" max="100" placeholder="final grade" required pattern="\d+" onchange="validateGrade(this)">
        <span class="validity"></span>
      </p>
      <p>
        <label for="assignment">Enter project grade: </label>
        <input type="number" name="finalProj" id="inputSpace7" min="0" max="100" placeholder="Project grade" required pattern="\d+" onchange="validateGrade(this)">
        <span class="validity"></span>
      </p>
      <p class="form-example">
        <button id="submitB" onclick="gradeCal()">Submit</button>
        <button onclick="reset()">Cancel</button>
      </p>
    </p>
  </p>
</form>
<div id="result" style="display: none">
  <h3>The results</h3>
  <div>First Assignment:
    <p class='gradeStyle' id="1"></p>
  </div>
  <div>Second Assignment:
    <p class='gradeStyle' id="2"></p>
  </div>
  <div>Third Assignment:
    <p class='gradeStyle' id="3"></p>
  </div>
  <div>Fourth Assignment:
    <p class='gradeStyle' id="4"></p>
  </div>
  <div>Midterm Exam Grade:
    <p class='gradeStyle' id="5"></p>
  </div>
  <div>Final Exam Grade:
    <p class='gradeStyle' id="6"></p>
  </div>
  <div>Project Grade:
    <p class='gradeStyle' id="7"></p>
  </div>
  <div>Average Grade:
    <p class='gradeStyle' id="AG"></p>
  </div>
</div>