Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Form Validation

  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation

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

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    How are you installing the event handler that calls the validator?

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

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    below is a snippet of how i made the function call:

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

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    It would be easier to have runnable example or URL, but this line
    Code:
    //place the message after the form field
    document.body.insertBefore(sp, id);
    is probably better written like this
    Code:
    id.parentNode.insertBefore( sp, id );
    But that places the span before the element.

    To place it after the element you can do this:
    Code:
    id.parentNode.insertBefore( sp, id.nextSibling );
    It doesn't matter if id.nextSibling is null.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by thickSkin View Post
    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.

    Code:
    <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>
    Last edited by Logic Ali; 03-29-2012 at 09:09 PM.

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you soooo...... much. It is working beautifully now. Was it because i did not use the onsubmit.

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by thickSkin View Post
    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.

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that's the thing, i wasn't getting any console messages in firebug.

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by thickSkin View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •