How to validate multiple text boxes to make sure they have letters only?

Question

I need to validate many different text boxes with javascript and I don't want to have to getElementById for each one. How would you validate to make sure each text box has a word in it prior to a button submit?

    <table id="inputTable">
  <tr>
    <td>
      <P>Verb: <input type="text" required id="varA"></p>
      <P>Adjective: <input type="text" required id="varB"></p>
      <P>Noun (plural): <input type="text" required id="varC"></p>
      <P>Adjective: <input type="text" required id="varD"></p>
      <P>Verb enging in "ing": <input type="text" required id="varE"></p>
      <P>Verb: <input type="text" required id="varF"></p>
      <P>Number: <input type="text" required id="varG"></p>
      <P>Adjective: <input type="text" required id="varH"></p>
    </td>
    <td>
      <P>Noun (plural): <input type="text" required id="varI"></p>
      <P>Noun (plural): <input type="text" required id="varJ"></p>
      <P>Noun (plural): <input type="text" required id="varK"></p>
      <P>Relative (plural): <input type="text" required id="varL"></p>
      <P>Adjective: <input type="text" required id="varM"></p>
      <P>Adjective: <input type="text" required id="varN"></p>
      <P>Noun (plural): <input type="text" required id="varO"></p>
      <P>Verb: <input type="text" required id="varP"></p>
    </td>
  </tr>

Possible duplicate of [Get list of all \`input\` objects using JavaScript, without accessing a \`form\` object](http://stackoverflow.com/questions/2214066/get-list-of-all-input-objects-using-javascript-without-accessing-a-form-obj) — NineBerry, Oct 21 '16 at 02:36
`document.querySelectorAll("input")` gets you a list of all input elements on the page. Or you can give them a common class and select by that. Then just loop over them and test the values. As an aside, shouldn't they have a `name` attribute if they're going to be submitted? — nnnnnn, Oct 21 '16 at 02:43
You have used `required` html5 attribute , then you dont need to worry about each text box has a word !!! — Jack jdeoel, Oct 21 '16 at 04:59

score 1 · Accepted Answer · answered Oct 21 '16 at 03:03

function submit_form() {
  all_input = document.querySelectorAll('input[type="text"]');
  console.log(all_input);
  for (var i = 0; i < all_input.length; ++i) {
    if (all_input[i].value.trim().match(/\w/) == null) {
      alert("You need to enter a word in each text box");
      return
    } 
  }
}
document.getElementById('fm').addEventListener('click',submit_form)

<form >
  <table id="inputTable">
  <tr>
    <td>
      <P>Verb:
        <input type="text" required id="varA">
      </p>
      <P>Adjective:
        <input type="text" required id="varB">
      </p>
      <P>Noun (plural):
        <input type="text" required id="varC">
      </p>
      <P>Adjective:
        <input type="text" required id="varD">
      </p>
      <P>Verb enging in "ing":
        <input type="text" required id="varE">
      </p>
      <P>Verb:
        <input type="text" required id="varF">
      </p>
      <P>Number:
        <input type="text" required id="varG">
      </p>
      <P>Adjective:
        <input type="text" required id="varH">
      </p>
    </td>
    <td>
      <P>Noun (plural):
        <input type="text" required id="varI">
      </p>
      <P>Noun (plural):
        <input type="text" required id="varJ">
      </p>
      <P>Noun (plural):
        <input type="text" required id="varK">
      </p>
      <P>Relative (plural):
        <input type="text" required id="varL">
      </p>
      <P>Adjective:
        <input type="text" required id="varM">
      </p>
      <P>Adjective:
        <input type="text" required id="varN">
      </p>
      <P>Noun (plural):
        <input type="text" required id="varO">
      </p>
      <P>Verb:
        <input type="text" required id="varP">
      </p>
    </td>
  </tr>
  <button type='submit' id="fm">SUbmit</button>
   </form>

score 0 · Answer 2 · answered Oct 21 '16 at 02:47

0

You can use $('input[type=text]') instead of getElementById for each text box..

answered Oct 21 '16 at 02:47

atul

134
2
14

score 0 · Answer 3 · answered Oct 21 '16 at 02:49

0

Add this attribute to each input: pattern="^[a-zA-Z]+$" -- it will prevent the form from being submitted if anything other than alpha characters are in the field -- assuming this is in an html form.

answered Oct 21 '16 at 02:49

Alexander Nied

12,804
4
25
45

score 0 · Answer 4 · answered Oct 21 '16 at 03:08

0

HTML5 form validation allows a regex in the pattern attribute. See MDN's Data form validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation)

answered Oct 21 '16 at 03:08

Ronnie Royston

16,778
6
77
91

shishir · Answer 5 · 2016-10-21T05:11:04.230

0

You may use the document.querySelectorAll which returns a list of the elements within the document.

How to validate multiple text boxes to make sure they have letters only?

5 Answers5