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, ie 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

Answer 1

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?

Answer 2

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

Answer 3

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, eg

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

Answer 4

This worked for me

Demo

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

trim() validates blank spaces.

Answer 5

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

Answer 6

尝试检查length属性

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

Answer 7

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


 }

Answer 8

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>