simple validation resists to validate textarea

Question

the validation is working on the input fields, but it resists to do so on the textarea. Why? When i log the length of the textarea to the console, it says that document.guest is undefined... but in my opinion this is obviously not the case, because its working on the input fields.

  <script type="text/javascript">
  function fcheck() {
    if (document.guest.name.value.length < 1) {
      alert("Du musst einen Namen eingeben!");
      return false;
    }
    if (document.guest.email.value.length < 1) {
      alert("Du musst eine Email eingeben!");
      return false;
    }
    if (document.guest.message.value.length < 1) {
      alert("Du musst eine Nachricht eingeben!");
      return false;
    }
    return true;
  }
  </script>

<div id="test2" class="col-md-6 form-group">
      <form action="addcomment.php" method="post" name="guest" onSubmit="return fcheck();">

        <div class="textform">
            <p>Name:
            <input type="text" name="name" class="form-control"/>
            </p>
        </div>

        <div class="textform">
            <p>E-Mail:
            <input type="text" name="email" class="form-control"/>
            </p>
        </div>

        <div class="textform">
            <p>Nachricht(Maximal 300 Zeichen):</p>
            <textarea cols="50" name="message" rows="10" class="form-control status-box" maxlength="300"> </textarea>
        </div>
        <br>
        <div class="pull-left">
            <p class="counter">300</p>
        </div>

        <div id="textarea" class="pull-right">
            <input type="submit" value="Nachricht abschicken" class="btn btn-primary" />
        </div>
      </form>
    </div>

Not related i think, but you should now use id="textarea" this way. Each id must be unique (and relevant). — Amessihel, Feb 11 '16 at 12:37

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

First of all, you need to prevent form default action using preventDefault. So replace this line of code in html: (for more info : JavaScript code to stop form submission )

onSubmit="return fcheck();"

with :

onSubmit="event.preventDefault(); fcheck();"

second, in your javascript:

<script type="text/javascript">
    function fcheck() {
        if (document.forms.guest.name.value.trim().length < 1) {
            alert("Du musst einen Namen eingeben!");
            return false;
        }
        if (document.forms.guest.email.value.trim().length < 1) {
            alert("Du musst eine Email eingeben!");
            return false;
        }
        if (document.forms.guest.message.value.trim().length < 1) {
            alert("Du musst eine Nachricht eingeben!");
            return false;
        }
        return true;
    }
</script>

edited May 23 '17 at 11:59

Community

1
1

answered Feb 11 '16 at 12:43

Mehran Torki

977
1
9
37

Now with event.preventDefault(); it does not submit the form. @Mehran Torki – Pingbeat Feb 11 '16 at 12:46
@Pingbeat I've just edited the code. It's working fine in my browser. – Mehran Torki Feb 11 '16 at 12:58
This answer should be selected. – Amessihel Feb 11 '16 at 13:17

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

You should write :

document.forms.guest

Instead of :

document.guest

You should also have a peek on this answer.

EDIT : in fact, your textarea has a length of "1" ! See this edited fiddle. It's due to the space character. Remove it and it will works.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 11 '16 at 12:40

Amessihel

5,891
3
16
40

Done that, sadly nuttin changed. :( Both of the input fields still do the alert, the textarea does not. @Amessihel – Pingbeat Feb 11 '16 at 12:42
@Pingbeat, I just found your issue. Read the update. :) – Amessihel Feb 11 '16 at 13:07
so `document.forms.guest.message.value.trim().length` works well. – Mehran Torki Feb 11 '16 at 13:14
@MehranTorki indeed, and it's a better solution also. – Amessihel Feb 11 '16 at 13:16
Where is this space char you are speaking of? I dunno what you mean :O – Pingbeat Feb 11 '16 at 13:41

score 1 · Answer 3 · answered Feb 11 '16 at 12:47

1

textareas dont show on document.form, you can access it like so:-

document.guest.elements["message"].value

answered Feb 11 '16 at 12:47

BenG

14,826
5
45
60

Awesome, this worked. But is there a reason I cant handle the textarea as I handled the inputs? – Pingbeat Feb 11 '16 at 12:56

simple validation resists to validate textarea

3 Answers3