Stop numerical values & allow numerical values JavaScript

Question

I was adding some JavaScript validation to my page and found that I couldn't find any helpful sources to tell me on how to stop numerical values and allow them on different input boxes. I am very new to JavaScript and aren't quite up to grips with it yet. I know VB has a command similar to what I am asking for: isNumeric()

Here is the code what I want to stop numerical values in:

if (document.ExamEntry.name.value=="") {
alert("You must enter your name \n");
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}

if (document.ExamEntry.subject.value=="") {
alert("You must enter the subject \n");
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}

Here is the code that I want to ONLY allow numerical values in:

if (document.ExamEntry.CadNumber.value.length!== 4) {
alert("Make sure you only have 4 numbers! \n");
document.ExamEntry.CadNumber.focus();
document.getElementById('CadNumber').style.color="red";
result = false;
}

---EDIT---

Here is what I have got so far now, it works sort of however it contstantly appears now... I was wondering if you knew anymore?

Stop Numerical values:

if (document.ExamEntry.subject.value) {
isNaN(parseInt(1));
alert("Please make sure you only have letters! \n");
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}

ONLY allow numerical values:

if (document.ExamEntry.CadNumber.value) {
isNaN(parseInt(""));
alert("Please make sure you only have numbers! \n");
document.ExamEntry.CadNumber.focus();
document.getElementById('CadNumber').style.color="red";
result = false;
}

This might help: http://stackoverflow.com/questions/891696/jquery-what-is-the-best-way-to-restrict-number-only-input-for-textboxes-all — lintmouse, Mar 18 '15 at 17:46
The only thing though, is that my whole project has to be in JavaScript. Learning multiple languages would be great but not for this.. — Benjaminbl12, Mar 18 '15 at 17:49
your if is now structured as, if it has a value do your parsing, throw an alert ... So, you should include the check with parseInt / isNan inside an if statement if you do not want it to run constantly (when a value was added). btw, don't get the elements the way you are doing it now, at best it will work in internet explorer, rather use document.getElementById... Just be carefull with editting here, don't make it a chameleon question http://meta.stackoverflow.com/questions/275138/how-to-deal-with-op-asking-another-questions-after-answering-original-question/275140#275140 — Icepickle, Mar 18 '15 at 18:20
Hi there, thanks for the input! so I would put an If statement, in an If statement? I'm not quite sure on what you're saying. — Benjaminbl12, Mar 18 '15 at 18:27

sifriday · Answer 1 · 2015-03-18T18:30:58.987

0

Look up isNaN and parseInt - they should get you started. From the JS console,

isNaN(parseInt("foo"))
true
isNaN(parseInt(12))
false

isNaN is like the opposite of your VBA isNumeric so you need to use it with parseInt on the document.ExamEntry.CadNumber.value

Use it like this:

if (isNaN(parseInt(document.ExamEntry.CadNumber.value))) {
    alert("Please make sure you only have numbers! \n");
    document.ExamEntry.CadNumber.focus();
    document.getElementById('CadNumber').style.color="red";
    result = false;
}

edited Mar 18 '15 at 18:30

answered Mar 18 '15 at 17:46

sifriday

4,342
1
13
24

So how would it be structured in the code I have supplied? – Benjaminbl12 Mar 18 '15 at 17:49
1

I was kinda leaving that as a challenge for yourself, to help with you learning JS :-) Nearly everything you need is in my answer. Have a go and post back your code if you can't get it right, then we can help you tweak it. – sifriday Mar 18 '15 at 17:58
Hi there, thanks for the input! I have added an update explaing what is now happening :) – Benjaminbl12 Mar 18 '15 at 18:14
hmm not quite! but good try. I've added an example to show you how to use it. – sifriday Mar 18 '15 at 18:31
Hi there! I would just like to let you know, your method, is spot on! Thank you again! – Benjaminbl12 Mar 18 '15 at 18:59
1

Great! If it works for you, you should accept this answer, which helps in two ways: 1. other people know not to come and add more answers, and 2. other people with a similar question will be able to use your accepted answer to help themselves. – sifriday Mar 18 '15 at 19:24

score 0 · Answer 2 · answered Mar 18 '15 at 18:50

To give a small example of how it could work, you could check this small snippet.

In a sense, at the moment you submit your form, it will go to the validate function, that will then check your form for the requirements.

The numbers only / text only is implied by the type (and your browser can also help), and the error message is supplied in a title.

When one field fails, the validation stops and throws the error.

Note, if you have any other elements you want to check (like selects) you would have to do some extra work still ;)

And if you want to learn more about the element types you could set, you could check it here as well

function validate(form) {
  var succeeded = true,
    i, len, item, itemArray, firstErrorField;

  if (!form) {
    succeeded = false;
  } else {
    itemArray = form.getElementsByTagName('input');
    for (i = 0, len = itemArray.length; i < len && succeeded; i++) {
      item = itemArray[i];
      switch (item.type) {
        case 'text':
          if ((!item.value && item.required) || !isNaN(parseInt(item.value))) {
            succeeded = false;
          }
          break;
        case 'number':
          if ((!item.value && item.required) || isNaN(parseInt(item.value))) {
            succeeded = false;
          }
          break;
      }
      if (!succeeded) {
        firstErrorField = item.title || item.id || item.name;
      }
    }
  }
  if (!succeeded) {
    alert('please check your input!\r\n' + firstErrorField);
  }
  return succeeded;
}

<form onsubmit="return validate(this);">
  <fieldset>
    <table>
      <tr>
        <td>Name:</td>
        <td>
          <input type="text" id="name" title="name is required" required />
        </td>
      </tr>
      <tr>
        <td>Age:</td>
        <td>
          <input type="number" id="age" required="required" min="0" title="age is required" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button type="submit">Submit</button>
        </td>
      </tr>
    </table>
  </fieldset>
</form>

Stop numerical values & allow numerical values JavaScript

2 Answers2