Javascript Form Value Restriction

I am trying to create a form which will store values in an empty array but the values must be between 0 to 5 and comma separated. the problem is it alerts if values is more than 5

Solution 1:

Try

if (form <0 || form >= 6)

Solution 2:

I think it may work better if you reorganize where the functions are being bound.

Event propagation order:

1. The button is clicked, and the value is pushed into the array.
2. The form's submit event triggers, and validates the values, but it's too late.

There are many ways to approach this one, but the simplest would be to call pushData at the end of your validateForm.

Adjusted the condition, because there's no way for a number to be less than 0AND greater than or equal to 6 at the same time.

Also added event.preventDefault to stop form submission.

JavaScript

function validateForm (event) {
  event.preventDefault();
  var form = document.forms["form1"]["inputText"].value;
  if (form < 0 || form > 5) {
    alert('value should must be between 0 to 5');
    returnfalse;
  }
  pushData();
}

HTML

<form name="form1" onsubmit="validateForm(event)">
  <input type="number"id="inputText" />
  <button type="submit">Insert</button>
  <p id="pText"></p>
</form>

JSFiddle

Solution 3:

Note that per the MDN:

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid.

With this particular form element you may add min and max attributes so that the user must enter a value within a specified range. Therefore, the current contents of the OP's validateForm() function are superfluous. Additionally, that function has a problematic line of code:

if(form <0 && form >= 6) {

You cannot have a value that is both less than zero and greater than or equal to six. Use instead a logical OR, i.e. "||" operator for the logic to work.

The following code allows for a user to select numeric values in the range that the OP specifies and then it displays them in a comma-separated format, as follows:

var d = document;
d.g = d.getElementById;
var pText = d.g('pText');
pText.innerHTML = "Grades: ";

var inputText = d.g("inputText"); 
var myArr = [];


functionpushData() {
   var notrailingcomma = "";
   
   myArr.push(inputText.value);
   
   if (myArr.length > 1) {
     notrailingcomma = myArr.join(", ").trim().replace(/,$/g,"");
     pText.innerHTML = "Grades: " + notrailingcomma;   
   }
   else
   {
      pText.innerHTML += inputText.value;
   }   
}


d.forms["form1"].onsubmit = function(event) {
    event.preventDefault();
    pushData();
};

p {
padding: 1em;
margin:1em;
background:#eeeeff;
color: #009;
}

<formname="form1"><inputtype="number"id="inputText"name="inputText"min=0max=5value=0><buttontype="submit">Insert</button></form><pid="pText"></p>

A couple of points with respect to the form:

• The OP's HTML has an error in the input field: it has two names. I dropped the one with a name of "text".
• I like what @thgaskell recommends with respect to changing "Insert" into a submit button, preventing the default action of submitting the form, and associating pushData with the form's onsubmit event. So, I've modified the code accordingly.