...

View Full Version : Form Validation



thickSkin
03-29-2012, 04:06 AM
Good Day,

I am new to this forum so i hope i am posting in the correct place.

I have been working on a form validation in javascript where the error messages should be displayed beside the form field (no alerts!). The error message is displayed when i iuse alerts but not otherwise.

I have included a code snippet below. Any help will be greatly appreciated. Thanks in advance.

function validation()
{
//alert('made it here');

var fName = document.getElementById('txtFname').value;
var fNameId = document.getElementById('txtFname');


if(validateName(fName,fNameId)){

return true;
}

return false;
}


function validateName(name,id){
var ck_name = /^[A-Za-z0-9 ]{6,20}$/;
//alert('made it it here');

if(!ck_name.test(name))
{
//alert("Invalid");
var message = "Should be between 3 and 20 characters and made up of etters, numbers or - symbol";

//create a new span element
var sp = document.createElement('span');
//assign the new span element a class
sp.className = 'error';
//assign span some content
sp.appendChild(document.createTextNode(message));
//place the message after the form field
document.body.insertBefore(sp, id);

name.value="";
name.focus();

return false;
}
return true;
}

Logic Ali
03-29-2012, 04:42 AM
How are you installing the event handler that calls the validator?

I suspect that the return value isn't being captured.

thickSkin
03-29-2012, 04:44 PM
below is a snippet of how i made the function call:

<input type="submit" name="submit" value="Register" onclick="return validation();"/>

Logic Ali
03-29-2012, 06:24 PM
It would be easier to have runnable example or URL, but this line


//place the message after the form field
document.body.insertBefore(sp, id);

is probably better written like this

id.parentNode.insertBefore( sp, id );
But that places the span before the element.

To place it after the element you can do this:

id.parentNode.insertBefore( sp, id.nextSibling );
It doesn't matter if id.nextSibling is null.

thickSkin
03-29-2012, 08:30 PM
That still did not work, i have included the rest of the code. I am basically just trying to validate a user name. When the user clicks the register button the validate function should be executed which in turn calls the validateName function. It works fine if i use alerts but it won't embed the message in the form itself.

<form id="frmRegistration" method="post" action="">

<label for="txtFname">First Name</label>
<input type="text" id="txtFname" value=""/>
<input type="submit" name="submit" value="Register" onclick="return validation();"/>
</form>

Logic Ali
03-29-2012, 09:02 PM
That still did not work, i have included the rest of the code. I am basically just trying to validate a user name. When the user clicks the register button the validate function should be executed which in turn calls the validateName function. It works fine if i use alerts but it won't embed the message in the form itself.

It doesn't work fine as you will discover if you use the error console. The error is causing a page reload.

Here's a slightly cleaned-up version. Now all you have to do is find a way to prevent the message appearing multiple times.


<html>
<head>
<title>Some Form</title>

<script type="text/javascript">

function validation()
{
var fNameId = document.getElementById('txtFname'),
fName = fNameId.value;

return validateName(fName,fNameId);
}


function validateName( name, id )
{
var ck_name = /^[A-Za-z0-9 ]{6,20}$/, ok = false;

if( !( ok = ck_name.test(name) ) )
{
var message = "Should be between 3 and 20 characters and made up of letters, numbers or - symbol";

//create a new span element
var sp = document.createElement('span');
//assign the new span element a class
sp.className = 'error';
//assign span some content
sp.appendChild(document.createTextNode(message));
//place the message after the form field

id.parentNode.insertBefore(sp, id.nextSibling );

name.value="";

id.focus();
}

return ok;
}

</script>
</head>
<body>

<form id="frmRegistration" method="post" action="" onsubmit="return validation();">
<label for="txtFname">First Name</label>
<input type="text" id="txtFname" value=""/><br>
<input type="submit" name="submit" value="Register" />
</form>

</body>
</html>

thickSkin
03-29-2012, 09:55 PM
Thank you soooo...... much. It is working beautifully now. Was it because i did not use the onsubmit.

Logic Ali
03-29-2012, 11:30 PM
Thank you soooo...... much. It is working beautifully now. Was it because i did not use the onsubmit.

Nothing to do with it. Run your old code and view the error in the console.

thickSkin
03-30-2012, 12:26 AM
that's the thing, i wasn't getting any console messages in firebug.

Logic Ali
03-30-2012, 12:29 AM
that's the thing, i wasn't getting any console messages in firebug.
This is the one circumstance under which Firebug being a plugin has a probem.
Because the page is dismissed by the form submission, the errors aren't logged.

Use the native console: Ctrl+Shift+J



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum