Want to count input length, and when below 6 show an error

Question

function validateWieslid() {

var countnummer = $("nummer").val().length;
var countpin = $("pin").val().length;

if (countnummer.length < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
 } 
if (countpin.length < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
 } 
}

That is my JavaScript function

            <div id="wies">
                <label>Lidnummer:</label> 
                <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
                <label>WIES pin:</label> 
                <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
           </div>

     <div id="lrError"></div>
     <div id="pinError"></div>

That is my HTML code in question,

The input with id="nummer" is supposed to be a 6 character long input, the input with id="pin" is supposed to be a pin number so its 4 characters long.

I'm trying to make it so that it shows the text shown in the JavaScript when the input length is below 6, however this I cannot make this work? I'm a beginning coder and this might be a really easy solution, but I'd like some assistance! Thanks :)

Answer 1

I have updated the fiddle to remove the jquery dependency

http://jsfiddle.net/SJJvk/2/

function validateWieslid() {
var countnummer = document.getElementById("nummer").value.length;
var countpin = document.getElementById("pin").value.length;

if (countnummer < 6) { 
  document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
  document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
  document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
  document.getElementById("pinError").style.backgroundColor = "red";
 } 
} 

BELOW IS NOW DEPRECATED:

There were a couple of issues with your code.

Here is a jsFiddle http://jsfiddle.net/SJJvk/

1) you were not triggering your function. 2) You were missing the # from your jQuery calling the error divs 3) your variables are actual numbers, no need to test for length,

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
console.log("cn is " + countnummer);
console.log("cn is " + countpin);

if (countnummer < 6) { 
document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
document.getElementById("pinError").style.backgroundColor = "red";
} 
}

Answer 2

For accessing the elements from their Id you should use # before the id name. For example for accessing following element -

<input name="lidnummer" size="30" type="text" id="nummer" maxlength="6">

I will use

$("#nummer")

First two lines of the method validateWieslid() will not work. It should be -

var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;

The correct code will be -

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
var flag = true;
if (countnummer < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
    flag = false;
 } 
if (countpin < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
    flag = false;
 } 
 return flag;
}

And suppose your HTML code is-

   <div id="wies">
        <form id="myForm" action="">
        <label>Lidnummer:</label> 
        <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
        <label>WIES pin:</label> 
        <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
        <input type="submit" value="submit"/>
        </form>
   </div>

Now you can bind the function with the form submit event by using -

$("#myForm").submit(function( event ) {
  if(!validateWieslid())
  event.preventDefault();
});