HTML -How to do error checking for null value input of textarea in javascript?

Question

I want to do some error checking in the script for the input of a textarea, i.e. if there is no input, showing an alert. I've tried to use value="" value='' , but seems all cannot work.

Field

 <div class="field">
        <label>remarks:</label>
        <textarea id="id_remarks" name="remarks"></textarea>
 </div>

Save button

<input type="submit" value="Save" onclick="verify()"/>

Function

<script>    
    function verify(){
    if (document.forms[0].elements['id_remarks'].value=='') {
        alert('Please enter the remarks')
    }
</script>

Can anyone help on how to do it? thanks very much

http://stackoverflow.com/questions/6003884/how-to-check-null-values-in-javascript — RGV, Jun 04 '13 at 01:48
The value of a form control is always a string, it is never `null` or `undefined`. — RobG, Jun 04 '13 at 01:52
Use a JS debugger. What's the actual value of `document.forms[0].elements['id_remarks'].value`? Set a breakpoint in `verify()` - does the function get called? — millimoose, Jun 04 '13 at 01:59
Anyway, there doesn't seem to be anything wrong in the code you've shown us (http://codepen.io/millimoose/pen/Avxwl), so I'm guessing your problem is elsewhere. — millimoose, Jun 04 '13 at 02:02

score 3 · Answer 1 · edited May 23 '17 at 11:51

3

var x=document.forms[0].elements['id_remarks'].value;

if(!x){} else {}

This checks for (""), null, undefined, false and the numbers 0 and NaN

Source :

How do I check for null values in JavaScript?

edited May 23 '17 at 11:51

Community

1
1

answered Jun 04 '13 at 01:51

RGV

732
3
10

But the OP only needs to check for "", the value of a form control will never be anything other than a string. – RobG Jun 04 '13 at 01:57

Mr Jerry · Accepted Answer · 2013-06-04T02:42:53.487

3

try it

function verify(){
    if(!document.getElementById('id_remarks').value.trim().length){
        alert("Please enter the remarks");
    }
 }

Updated: Fixed for IE version < 9

In IE below version 9, it is not support .trim()

if(typeof String.prototype.trim !== 'function'){
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, ''); 
    }
}

edited Jun 04 '13 at 02:42

answered Jun 04 '13 at 01:52

Mr Jerry

1,686
3
14
22

`.trim()` will fail in IE8 and below – Sushanth -- Jun 04 '13 at 01:55

score 1 · Answer 3 · answered Jun 04 '13 at 02:03

Validation is more commonly applied to a form's submit handler since a form can be submitted without clicking the submit button.

Comparing the value of the control with "" (empty string) should work, however the value might be whitespace so you might want to remove that first, e.g.

<form onsubmit= "return verify(this);" ...>
  <textarea id="id_remarks" name="remarks"></textarea>
  <input type="submit">
</form>

<script>
function verify(form) {
  if (form.remarks.value.replace(/\s+/g,'') == '') {
    alert('Please enter some remarks');
    return false;
  }
}
</script>

If you know you're in an ES5 environment. ;-) – RobG Jun 04 '13 at 03:16 — RobG, Jun 04 '13 at 03:16

score 1 · Answer 4 · answered Jun 04 '13 at 02:05

1

This worked for me

Demo

if (!document.getElementById('id_remarks').value.trim()) {
        alert('Please enter the remarks');
    }

trim() validates blank spaces.

answered Jun 04 '13 at 02:05

Rajender Joshi

4,155
1
23
39

score 1 · Answer 5 · answered Jun 04 '13 at 02:35

Comparing the .value of the textarea object to an empty string works fine (see this jsFiddle).

The only think I can see that's odd about your code is the use of the .elements property of the form object. I can't say that's it's wrong, just that it's not the way I'm used to seeing it done. I'm used to identifying DOM objects using document.getElementById().

In any case, the following works...

HTML:

<form id="f1" action="" method="post">
    <label for="ta1">TextArea</label>
    <br/>
    <textarea id="ta1"></textarea>
    <label for="result">Result:</label>
    <input id="result" type="text"></input>
    <br/>
    <input type="submit" value="verify"></input>
</form>

JavaScript:

var ta1 = document.getElementById("ta1");
var result = document.getElementById("result");
f1.onsubmit = function () {
    if (ta1.value === "") {
        result.style.color = "red";
        result.value = "Blank";
    } else {
        result.style.color = "blue";
        result.value = "Not Blank: '" + ta1.value + "'";
    }
    return false;
};

Sushanth -- · Answer 6 · 2013-06-04T01:55:18.197

0

Try to check for the length property

if (!document.forms[0].elements['id_remarks'].value.length) {

edited Jun 04 '13 at 01:55

answered Jun 04 '13 at 01:47

Sushanth --

55,259
9
66
105

A zero length string is equal to an empty string, i.e. if *a* is a string and `a.length == 0` then `a === ''`. – RobG Jun 04 '13 at 01:51
you should check not of document.forms[0].elements['id_remarks'].value.length – Mehdi Yeganeh Jun 04 '13 at 01:51

score 0 · Answer 7 · answered Jun 04 '13 at 02:01

Fiddle working http://jsfiddle.net/Q4JPs/8/

HTML

<div class="field">
        <label>remarks:</label>
        <textarea id="id_remarks" name="remarks"></textarea>
 </div>
<button id='btn'>Click me</button>

js

document.getElementById('btn').onclick = function (){
    if (document.getElementById('id_remarks').value =="")
    {
        alert("is Empty");
        return;
    }


 }

score 0 · Answer 8 · answered Aug 06 '17 at 06:33

You could use the required attribute in HTML5, it works on all modern browsers, even if users have javascript disabled. Example:

<form action="" method="post">
    <input name="username" value="" title="username" required>
    <input type="submit">
</form>

HTML -How to do error checking for null value input of textarea in javascript?

8 Answers8