Javascript form value restriction

Question

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 but still stores the value in the array. I want it to alert and then restore the form value.

Here is my code:

<form name ="form1" onsubmit="return validateForm()">
    <input type="number" name="text" id="inputText" name="inputText" />
    <button onclick="pushData();">Insert</button>
    <p id="pText"></p>
</form>

And javascript:

function validateForm () {
    var form = document.forms["form1"]["inputText"].value;
    if(form <0 && form >= 6) {
        alert('value should must be between 0 to 5');
        return false;
    }
}

// create an empty array
var myArr = [];

function pushData() {
    // get value from the input text
    var inputText = document.getElementById('inputText').value;

    // append data to the array
    myArr.push(inputText);

    var pval = "";

    for(i = 0; i < myArr.length; i++) {
        pval = pval + myArr[i];
    }

    // display array data
    document.getElementById('pText').innerHTML = "Grades: "  + pval ;

}

Sigh, this `form <0 && form >= 6` is never true. – c-smile Nov 29 '17 at 00:21 — c-smile, Nov 29 '17 at 00:21

score 1 · Answer 1 · answered Nov 29 '17 at 00:15

1

Try

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

answered Nov 29 '17 at 00:15

moon

640
6
14

slevy1 · Answer 2 · 2017-11-30T23:19:24.747

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 = [];


function pushData() {
   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;
}

<form name="form1">
<input type="number" id="inputText"  name="inputText"  min=0 max=5 value=0>

<button type="submit">Insert</button>

</form>
        
 <p id="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.

score 0 · Answer 3 · answered Nov 29 '17 at 01:12

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

Event propagation order:

The button is clicked, and the value is pushed into the array.
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 0 AND 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');
    return false;
  }
  pushData();
}

HTML

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

JSFiddle

Javascript form value restriction

3 Answers3

Linked