SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    argh! js form validation - doing my head in!!!

    okay I am NO good with Javascript so please do not laugh it my awful code..

    What I am trying to achieve sounded so easy in principle but the more I read up on it the worse I got and have ended up not knowing whether I am coming or going

    Okay I have a html form (simple search and advanced search screens) I need to check that of the field that are completed they must be at least 2 characters in length and must contain an alphanumeric value.

    so what I have got is this:
    code on my form
    Code:
    onSubmit="return checksearchdata(this)" name=f1
    and then in JS code I have this (kind of)

    Code:
    function checksearchdata(obj) 
    	{
    	var formObj = f1code;
    	var codeReg = new RegExp(/[a-z][0-9]/)
    	
    	if (!codeReg.test(formObj.value))
    		{
    		alert("Your data is not valid for the "+formObj.name);
    		formObj.select();
    		formObj.focus();
    		return false;
    		}
    
    	var min = 2;
    		if (!field.value || field.value.length < min) 
    		{
    		alert(msg);
    		field.focus();
    		field.select();
    		return false;
    		}
    
    	return true;
    	}
    I am doubting the min length as I am looking at (obj) rather than field.length.. I already check previously that at least one field in filled in, so its only to check the filled in fields are 2 digits min etc etc

    please help and please don't laugh

    Thanking you

    Sarah
    Regular user

  2. #2
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is you are not referencing your fields correctly. Try this.

    Code:
    function checkSearchData(obj) 
    	{
    	var formObj = obj;
    	var codeReg = new RegExp(/[a-z][0-9]/)
    	
    	if (!codeReg.test(formObj.fl.value))
    		{
    		alert("Your data is not valid for the "+formObj.fl.value);
    		formObj.fl.select();
    		formObj.fl.focus();
    		return false;
    		}
    
        field = formObj.fl;
            
    	var min = 2;
    		if (!field.value || field.value.length < min) 
    		{
    		alert("Minimum length");
    		field.focus();
    		field.select();
    		return false;
    		}
    
    	return true;
    	}

  3. #3
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hmmm that doesn't seem to do anything I ahve this as my code now
    Code:
    <script language="javascript">
    <!--
    function checkSearchData(obj) 
    	{
    	var formObj = obj;
    	var codeReg = new RegExp(/[a-z][0-9]/)
    	
    	if (!codeReg.test(formObj.fl.value))
    		{
    		alert("Your data is not valid for the "+formObj.fl.value);
    		formObj.fl.select();
    		formObj.fl.focus();
    		return false;
    		}
    
        field = formObj.fl;
            
    	var min = 2;
    		if (!field.value || field.value.length < min) 
    		{
    		alert("Minimum length");
    		field.focus();
    		field.select();
    		return false;
    		}
    
    	return true;
    	}
    -->
    </script>
    
    </head>
    <body>
    
    <form method="get" action="test.html" onSubmit="return checkSearchData(this)" name=f1>
    	<input type="text" name="code" /><br />
    	<input type="submit" name="Submit" value="Submit" />
    </form>
    all it does is takes me to the next page even when I enter in a single letter or number.

    ??

    Sarah
    Regular user

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    !! WARNING !! The proceeding is a shameless self-promotion

    fValidate baby....

    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ho hum you might want to check that link

    actually I have browsed your site whilst looking for help anyway but will have another look as I couldn't quite get what you had to what I need!
    Regular user

  6. #6
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again you are not referencing your form elements correctly!

    Okay, let's do it like this. Here's the HTML code for your form.

    Code:
    <form method="get" action="test.html" onSubmit="return checkSearchData(this)">
    	<input type="text" name="code" /><br />
    	<input type="submit" name="Submit" value="Submit" />
    </form>
    I removed the 'name="fl"' attribute of the form element. Why? Because we don't need it here. When the user submits the form, the javascript checkSearchData(this) function is fired off. And since it supplies "this" which is a reference to the form itself, you don't need to name the form nor access it directly.

    Now in your javascript code...

    Code:
    function checkSearchData(objForm) 
    	{
    	var codeReg = new RegExp(/[a-z][0-9]/)
    	
    	if (!codeReg.test(objForm.code.value))
    		{
    		alert("Your data is not valid for the "+objForm.code.value);
    		objForm.code.select();
    		objForm.code.focus();
    		return false;
    		}
    
    	var min = 2;
    		if (!objForm.code.value || objForm.code.value.length < min) 
    		{
    		alert("Minimum length");
    		objForm.code.focus();
    		objForm.code.select();
    		return false;
    		}
    
    	return true;
    	}
    See how we are accessing the text field called "code" in javascript?

    I have my doubts about your RegExp check so you might want to have a look into that too.

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sarah
    ho hum you might want to check that link

    actually I have browsed your site whilst looking for help anyway but will have another look as I couldn't quite get what you had to what I need!
    What's wrong with the link? Works ok for me? Anyhow, the full URL is www.peterbailey.net/fValidate/site.php

    Anyhow, moving right along, if you do use fValidate, just link up the two JS files, and change your form to look like this:
    Code:
    <form method="get" action="test.html" onSubmit="return validateForm(this,0,1,0,0)" >
    	<input type="text" name="code" alt="alnum|2|L|1|0|none"/><br />
    	<input type="submit" name="Submit" value="Submit" />
    </form>
    Details on the alnum validator type here: http://www.peterbailey.net/fValidate...ge=types#alnum
    Last edited by beetle; Oct 4, 2002 at 10:06.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    cmorbutts - thank you for your patience I now understand what you mean - and yes it seems to be working better. I agree that my regexp is incorrect and that part I looking at now, I first wanted to get the structure correct.

    Beetle when I tried your link after you posted it I got server not found three times, but can now get through. And thanks but I am trying to learn it myself i.e. how to do it rather than my usual copy and paste from someone else.

    Sarah
    Regular user

  9. #9
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries Sarah. Glad that it's working out. Let us know how you go in the end.


Bookmarks

Posting Permissions

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