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

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

• javascript
• html

• stackoverflow./questions/6003884/… – RGV Commented Jun 4, 2013 at 1:48
• The value of a form control is always a string, it is never null or undefined. – 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 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 Commented Jun 4, 2013 at 2:02

8 Answers 8

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, ''); 
    }
}

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?

Validation is more monly 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>

This worked for me

Demo

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

trim() validates blank spaces.

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

Try to check for the length property

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

Fiddle working http://jsfiddle/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;
    }


 }

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>