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

The value of a form control is always a string, it is never null or undefined. — RobG
– RobG, Commented Jun 4, 2013 at 1: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
– millimoose, Commented Jun 4, 2013 at 1:59
Anyway, there doesn't seem to be anything wrong in the code you've shown us (codepen.io/millimoose/pen/Avxwl), so I'm guessing your problem is elsewhere. — millimoose
– millimoose, Commented Jun 4, 2013 at 2:02

Mr Jerry · Accepted Answer · 2013-06-04 02:42:53Z

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 4, 2013 at 2:42

answered Jun 4, 2013 at 1:52

Mr Jerry

1,7743 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sushanth -- Over a year ago

.trim() will fail in IE8 and below

Community · Accepted Answer · 2017-05-23 11:51:51Z

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, 2017 at 11:51

CommunityBot

11 silver badge

answered Jun 4, 2013 at 1:51

RGV

7423 silver badges10 bronze badges

1 Comment

RobG Over a year ago

But the OP only needs to check for "", the value of a form control will never be anything other than a string.

RobG · Accepted Answer · 2013-06-04 02:03:03Z

1

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>

answered Jun 4, 2013 at 2:03

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

RobG Over a year ago

If you know you're in an ES5 environment. ;-)

Rajender Joshi · Accepted Answer · 2013-06-04 02:05:49Z

1

This worked for me

Demo

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

trim() validates blank spaces.

answered Jun 4, 2013 at 2:05

Rajender Joshi

4,2251 gold badge26 silver badges41 bronze badges

Comments

user166560 · Accepted Answer · 2013-06-04 02:35:14Z

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 -- · Accepted Answer · 2013-06-04 01:55:18Z

0

Try to check for the length property

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

edited Jun 4, 2013 at 1:55

answered Jun 4, 2013 at 1:47

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

RobG Over a year ago

A zero length string is equal to an empty string, i.e. if a is a string and a.length == 0 then a === ''.

Mehdi Yeganeh Over a year ago

you should check not of document.forms[0].elements['id_remarks'].value.length

Neobta · Accepted Answer · 2013-06-04 02:01:29Z

0

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;
    }


 }

answered Jun 4, 2013 at 2:01

Neobta

293 bronze badges

Comments

Key Shang · Accepted Answer · 2017-08-06 06:33:47Z

0

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>

answered Aug 6, 2017 at 6:33

Key Shang

9371 gold badge17 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

1 Comment

1 Comment

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related