Member Avatar for SMode55

I wrote a very simple validating script and I can't see what am I missing it just won't run at all

<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<SCRIPT type "text/JavaScript"> 




    (function checkform(){

var user = document.getElementById('user').value;
if (user.lenght<5)
{
    $("#username_error").html("Please enter a Username");
    return false;

    } 
    else
    {return true}

    })


    (function checkuser(){
        var user = document.getElementById('user').value;
var element = document.getElementById('username_error');
if (user.lenght<5)
{
    element.innerHTML ="Please Enter a valid Username";

    } else
    {  element.innerHTML ="Username is valid";
    }






    })

</SCRIPT>
</head>

<body>

<form onsubmit='checkform();'>
<input type="text" id="user" onblur='checkuser();' />
<input type="submit" value="submit"/>
<div id="username_error">div</div></form>
</body>
</html>
Edited by SMode55
  • 2 Contributors
  • 6 Replies
  • 176 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by SMode55
Member Avatar for adam.adamski.96155

if (user.lenght<5) <-- typo of the word length. There may be other things, but your code is so messy I need to format your nested loops to make any sense of them.
There is a great article here regarding the format of your code and loops:
http://phpmaster.com/practical-refactoring-1/

Member Avatar for SMode55

Thanks for the reply, I completely missed that. But the code is still dead .

Member Avatar for adam.adamski.96155

You say the code is dead.
What does that mean?
What do you think the code should do?

Member Avatar for SMode55

Hello Adam, it's just not working at all for me, I fill the form click submit and it just refreshes the page even if my input is below 5 characters. I still cant see what I am doing wrong here. The real form is a lot bigger it has several fields, this is just one field that I've pasted here. Maybe dreamweaver is screwing me over as it did it before, but not with javascript. I'll try running it in Aptana see what happens.The code should just validate my input, if the input is below 5 characters it shoud give me a message in my div as my input is below 5 chars.

Edited by SMode55
Member Avatar for adam.adamski.96155

Ok, understood.
Presumably you want the input validated before the form is submitted and only alllowed to continue if the input passes the validation test.
You need to capture the submission of the form and take control which you almost do:
<form onsubmit='checkform();'>
This may not be the correct way, but I have always added return false; at this point to stop the form submitting, it has always worked as intended for me:
<form id="myform" onsubmit='checkform(); return false;'>
Now the function has control of the form input and can decide if the submission is to be refused and a reason given to the user, or allow the form to continue.

If it is decided that the form is okay and can procede the following command will acheive it:
document.getElementById('myForm').submit();

for reference:

<SCRIPT type "text/JavaScript">
function checkform(){
    var user_value = document.getElementById('user').value;
    var error_div = document.getElementById('error_div');
    if (user_value.length < 5){
        error_div.innerHTML = "Please enter a valid Username (5chars+)";
    } else {
        document.getElementById('myForm').submit();
    }
}
</SCRIPT>

and the html:

<form id="myForm" onsubmit='checkform(); return false;'>
<input type="text" id="user" />
<input type="submit" value="submit"/>
<div id="error_div">initial data</div></form>
Edited by adam.adamski.96155
Member Avatar for SMode55

Thank you , I can see what I was doing wrong. Really appreciate it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.