I am having problems getting a javascript function of mine to work. What happens is it validates form fields and will display an error if incorrect via a seperate div.

Javascript:

function validatestr(id,max,min) {
    var maximum = parseInt(max);
    var minmum = parseInt(min);

    var div = document.getElementById(id+'_error');
    var x = document.getElementById(id);

    div.innerHTML = '';
    if (x.value == null || x.value == '') {
        div.innerHTML = 'Value must not be null!';
    }
    if (x.length > maximum || x.length < minimum) {
        div.innerHTML = 'Value must be between '+minimum+' and '+maximum+' chars!';
    }
}

HTML:

<input type="text" class="textbox" id="varchar" name="varchar" onblur="validatestr('varchar',100,10)"> 
<div style="display:inline;color:#ff0000;font-weight:bold" id="varchar_error"></div>

What happens is that the checking that the value is null works as expected, but the checking of the value's length does not work correctly. What happens when I test this is that the string length appears to be undefined. Could anyone enlighten me as to what is wrong? Cheers!

I am having problems getting a javascript function of mine to work. What happens is it validates form fields and will display an error if incorrect via a seperate div.

Javascript:

function validatestr(id,max,min) {
    var maximum = parseInt(max);
    var minmum = parseInt(min);

    var div = document.getElementById(id+'_error');
    var x = document.getElementById(id);

    div.innerHTML = '';
    if (x.value == null || x.value == '') {
        div.innerHTML = 'Value must not be null!';
    }
    if (x.length > maximum || x.length < minimum) {
        div.innerHTML = 'Value must be between '+minimum+' and '+maximum+' chars!';
    }
}

HTML:

<input type="text" class="textbox" id="varchar" name="varchar" onblur="validatestr('varchar',100,10)"> 
<div style="display:inline;color:#ff0000;font-weight:bold" id="varchar_error"></div>

What happens is that the checking that the value is null works as expected, but the checking of the value's length does not work correctly. What happens when I test this is that the string length appears to be undefined. Could anyone enlighten me as to what is wrong? Cheers!

• javascript
• string

• 1 You know that x is a HTML element right, not a string ? – adeneo Commented Jun 13, 2014 at 17:51
• BTW, if x was your string, you'd not want to write x.value == null || x.value == '' -- you'd be better off writing (!x). – Jeremy J Starcher Commented Jun 13, 2014 at 17:59

1 Answer 1

Well x is an input element, so you need to use x.value.length not x.length.

if (x.value.length > maximum || x.value.length < minimum) {

DOM elements don't have a length property, you want the value's length property because value is a string.

There is also a typo in the minimum variable.

Working demo