How to give validation using JavaScript

Question

I have made a table where I have to enter some values for calculating the average of certain values. I have a submit button for submitting the form and store the values into a database.

When I don't enter any data and submit the form, 0 values are stored into the database. So I have to validate each of the text boxes. How can I do that with JavaScript?

function calcAvg(input_id, output_id, att_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  var grade = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;

  if (avg >= 80)
    grade = 'HIGH';
  else if (avg >= 60 && avg < 80)
    grade = 'MEDIUM';
  else if (avg >= 40 && avg < 60)
    grade = 'LOW'
  else
    grade = 'N/A'

  //Output average
  document.getElementById(att_id).value = grade;
}

<form method='POST'>
  <table>
    <tr>
      <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
      </td>
    </tr>
    <tr>
      <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
      <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    </tr>
    <tr>
      <td width="7%" align="center">PO1</td>
      <td width="7%" align="center">PO2</td>
    </tr>
    <tr>
      <td height="71" align="center">MATHEMATICS</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">SCIENCE</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;
      </td>
    </tr>
    <tr bgcolor="#9999CC">
      <td height="71" align="center">PO AVERAGES</td>
      <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">PO ATTAINMENT</td>
      <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
    </tr>
  </table>
  <p align="center"><input type="submit" name="submit" value="submit"></p>
</form>

<script type="text/javascript">
  function calcAvg(input_id, output_id, att_id) {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName(input_id);
    //Initialize vars
    var avg = 0;
    var count = 0;
    var grade = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
      if (selects[i].value != "") {
        count++;
        avg += Number(selects[i].value);
        //Alert for debugging purposes
        //alert(selects[i].value+" "+avg);
      }
    }
    avg = avg / count;
    //Output average
    document.getElementById(output_id).value = avg;

    if (avg >= 80)
      grade = 'HIGH';
    else if (avg >= 60 && avg < 80)
      grade = 'MEDIUM';
    else if (avg >= 40 && avg < 60)
      grade = 'LOW'
    else
      grade = 'N/A'

    //Output average
    document.getElementById(att_id).value = grade;
  }
</script>

<form method='POST'>
  <table>
    <tr>
      <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
      </td>
    </tr>
    <tr>
      <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
      <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    </tr>
    <tr>
      <td width="7%" align="center">PO1</td>
      <td width="7%" align="center">PO2</td>
    </tr>
    <tr>
      <td height="71" align="center">MATHEMATICS</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');"
          style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');"
          style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">SCIENCE</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');"
          style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');"
          style="width:60px">&nbsp;
      </td>
    </tr>
    <tr bgcolor="#9999CC">
      <td height="71" align="center">PO AVERAGES</td>
      <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">PO ATTAINMENT</td>
      <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
    </tr>
  </table>
  <p align="center"><input type="submit" name="submit" value="submit"></p>
</form>

score 2 · Accepted Answer · answered May 24 '17 at 20:59

You could set a common class to the required fields and then, create a new function to check if they are not empty or = 0, calling it on submit button onclick event.

See my example below:

function calcAvg(input_id, output_id, att_id) {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName(input_id);
    //Initialize vars
    var avg = 0;
    var count = 0;
    var grade = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
      if (selects[i].value != "") {
        count++;
        avg += Number(selects[i].value);
        //Alert for debugging purposes
        //alert(selects[i].value+" "+avg);
      }
    }
    avg = avg / count;
    //Output average
    document.getElementById(output_id).value = avg;

    if (avg >= 80)
      grade = 'HIGH';
    else if (avg >= 60 && avg < 80)
      grade = 'MEDIUM';
    else if (avg >= 40 && avg < 60)
      grade = 'LOW'
    else
      grade = 'N/A'

    //Output average
    document.getElementById(att_id).value = grade;
  }
  
function validateForm() {
  var required = document.getElementsByClassName('required');

  for (var i = 0; i < required.length; i++) {
    var value = required[i].value;
    if (Number(value) === 0 || value == '') {
      console.log('Please, fill all the required fields before submitting');
      return false;
    }
  }
}

<form method='POST'>
  <table>
    <tr>
      <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
      </td>
    </tr>
    <tr>
      <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
      <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    </tr>
    <tr>
      <td width="7%" align="center">PO1</td>
      <td width="7%" align="center">PO2</td>
    </tr>
    <tr>
      <td height="71" align="center">MATHEMATICS</td>
      <td align="center">
        <input type="number" class="select1 required" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center">
        <input type="number" class="select2 required" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">SCIENCE</td>
      <td align="center">
        <input type="number" class="select1 required" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center">
        <input type="number" class="select2 required" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;
      </td>
    </tr>
    <tr bgcolor="#9999CC">
      <td height="71" align="center">PO AVERAGES</td>
      <td align="center">
        <input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
      <td align="center">
        <input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">PO ATTAINMENT</td>
      <td align="center">
        <input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
      <td align="center">
        <input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
    </tr>
  </table>
  <p align="center">
    <input type="button" name="submit" value="submit" onclick='validateForm()'>
  </p>
</form>

yes you are write... But if i use var required = document.getElementsByName('value[]'); will it work? — Debasish Choudhury, May 24 '17 at 21:08

vahdet · Answer 2 · 2017-05-24T21:14:05.403

0

The issue here may help you for parsing an input and checking if it is a number and positive. Or with some modification on your code:

//Calculate average
for (var i = 0; i < selects.length; i++) {
  if (selects[i].value == "") {
      // Alert if one of inputs is null
      alert("Cannot be empty");      
  }
  else {
    count++;
    avg += Number(selects[i].value);
    //Alert for debugging purposes
    //alert(selects[i].value+" "+avg);
  }
}

Or with HTML5 you can use reuired attribute on the inputs themselves like:

<input type="text" name="foo" required>

edited May 24 '17 at 21:14

answered May 24 '17 at 20:43

vahdet

6,357
9
51
106

i have not given any validation code here...I have to validate each of the input text boxes so that when i am not entering any value and click the submit button the zero values should not be stored and a validation message that showing please input the values. – Debasish Choudhury May 24 '17 at 20:47

How to give validation using JavaScript

2 Answers2