473,414 Members | 1,686 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,414 software developers and data experts.

[NEWBIE]Form Validation Approach Suggestions welcome!

121 100+
Greetings everyone.

The Newbie is coming back from uni...

I knew making a good form validation JavaScript would be a piece of cake for you guys, but as a novice programmer as me, I still find some difficulties to make my code perfect.

Yeah, I made it, by the help of the generous Google, it goes like this:

------------------------------My code Starts-------------------------------
[html]
<html>
<head>
<title>the test page for form validation</title>
</head>
<body>

<!-- This template is taken from:http://www.plus2net.com/javascript_tutorial/javascript_validation.php -->
<p><h1>The purpose of the first checking is to see if user input wa just a 8-digit number.</h1></p>
<script type='text/javascript'>
function mediacodeValidate(elem, helperMsg){
<!-- the regular expression is for check whether the user input fits the rule:"a string made up with exactly 8 numerical letters", or better to say, "a number with exactly 8 digits".
-->
var numericExpression = /^[0-9]{8}/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form>
Please inter a 8-digit number for the mediacode: <input type='text' id='numbers' maxlength="8" onblur="mediacodeValidate(document.getElementById( 'numbers'), 'Please inter exactly a 8-digit number!')"/>
<input type='button'
onclick="mediacodeValidate(document.getElementById ('numbers'), 'Please inter exactly a 8-digit number!')"
value='Check Field' />
</form>
</body>
</html>
[/html]
-----------------------------My Code Ends------------------------------





Feel free to take it, it works, and fits the requirement, but...

I cannot make it "outsourced", say, I tried to use <script src="blahblah.js" />, which is referencing the script part in the html head, but I failed...

What was worse, I cannot remove the maxlength constrain of the text.
The reason is, the regular expression would accept any number that are made of no less than 8 digits!

I know the string's beginning sign "^", but cannot find its spouse, which is the ending sign...

And since I just search from the web plus with a discount OLD reference book, called "Pure JavaScript" by Wyke, Gilliam, Ting and Michaels, I wonder if this style is still the preferred way of JavaScript programming.

I must think in advance, plan ahead. Because in late September I will be asked to apply more strict checks against the user inputs. So better think about it now.





Many thanks in advance!






Sincerely yours,

mattmao
Aug 20 '07 #1
5 1766
gits
5,390 Expert Mod 4TB
hi ...

try this ;)

Expand|Select|Wrap|Line Numbers
  1. var numericExpression = /^[0-9]{8}$/;
or

Expand|Select|Wrap|Line Numbers
  1. var numericExpression = /^\d{8}$/;
and what was wrong with the script-include?

kind regards
Aug 20 '07 #2
mattmao
121 100+
Thanks a lot!

That's all right for the validation. $, I missed this signal in my code, now it is Okay!

The thing that I want to achieve is, to make the whole JavaScript part stay in a referenced .js file, including the "event triggers"(they are now embedded inside the form).

I realized that I friend of mine got a good reference book that tells you how to do this job in that way, just cannot remember the exact syntax, something starts with:

window.onload()
{
code block
}

......




I found my logic error just when I was having dinner: you cannot only called the .js file, you must perform some "loading stuff" before triggering it.

Now I am happy with the solution, thanks again for your help!
Aug 20 '07 #3
gits
5,390 Expert Mod 4TB
hi ...

glad you got it working ;) ... post in the forum anytime you have more questions ...

kind regards
Aug 20 '07 #4
mattmao
121 100+
Hi, I finished my form validation check but it came up with another question:

"How to focus() the invalid input?"

From a website "http://www.the-art-of-web.com/javascript/validate/" I saw this sample:
-------------------Sample Code Starts-------------------

[HTML]<form method="POST" action="action" onSubmit="return checkForm(this);"> Input: <input type="text" size="32" name="input"> <input type="submit"> </form>[/HTML]

------------------Sample Code Ends---------------------

Then you can focus your selection! Note the QUOTED part, which confuses me.

-------------------Sample Code Starts-------------------
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">  
  2. function checkForm(form) { 
  3. // validation fails if the input is blank
  4.  if(form.input.value == '') 
  5.       { alert("Error: Input is empty!"); 
  6.  
  7.         
  8.                 form.input.focus();  
  9.  
  10.         return false;  } 
  11. // regular expression to match alphanumeric characters and spaces 
  12. var re = /^[\w ]+$/; 
  13. // validation fails if the input doesn't match the regular expression if(!re.test(form.input.value))
  14. { alert("Error: Input contains invalid characters!");
  15.  form.input.focus();
  16.   return false;  } 
  17. // validation was successful 
  18.  return true;  } </script>
  19.  
-------------------Sample Code Ends----------------

I followed the same logic and tried everything I could, but they all failed.
I cannot put the focus back on the invalid input. Of course I put the name attributes with my form as well as their id attributes.

I tried:

document.getElementById("userInputForm").getElemen tById("mediacodeInput").focus();

It didn't work.

myForm.firstInput.focus();

It didn't work either.

Even document.myForm.firstInput.focus() didn't work.

-------------------Another Sample Code Starts------------------
[HTML]<script type='text/javascript'>
function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return true;
}
return false;
}
</script>
<form>
Required Field: <input type='text' id='req1'/>
<input type='button'
onclick="isEmpty(document.getElementById('req1'), 'Please Enter a Value')"
value='Check Field' />
</form>[/HTML]

--------------Another Sample Code Ends ----------

I followed exactly the same pattern, but just can NOT get the right focus :(

This problem kills me... I really don't know at which part I got wrong...
Aug 20 '07 #5
gits
5,390 Expert Mod 4TB
hi ...

please use the correct CODE tags ... you find it at the top of the message-editor.

give your input-element a name or an id and refer to it the right way ... lets say you give it the id = 'my_input_ele', then you use:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('my_input_ele').focus();
kind regards
Aug 20 '07 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: Roger Price | last post by:
I am a newbie to PHP and finding even the simple stuff quite hard. I am trying to validate an email address using a recursive page. The validation is done using a regular expression which works...
7
by: Billy | last post by:
Hi, I've just spent a day writing a page which has expandable menus using layers and I have come to find that layers overlap if the user has their browser text-size settings set to a larger than...
16
by: Hosh | last post by:
I have a form on a webpage and want to use JavaScript validation for the form fields. I have searched the web for form validation scripts and have come up with scripts that only validate...
5
by: Moon Chow | last post by:
Hello, can anyone help me write a fragment of code to check to see if textarea form input contains the string "http" ? I've successfully created form checking functions with IF statements like...
7
by: php newbie | last post by:
I am creating a form Form1.php that posts to the another form Form2.php. I have input validations on the first form. I need the user to go to the next form ONLY if the inputs from the user are...
7
by: lepage.diane | last post by:
Hello I am a newbie to PHP. Please bear with me. I need to validate the following fields using php. 1. email (needs to be just one e-mail address, and take out stuff like bcc or anything that...
17
by: cmcdermo | last post by:
Ok my first post here so sorry if i mess something up. I have to edit a page that uses some javascript and not sure really. At the moment a user clicks on a button saying "black and white" and...
1
by: Mark B | last post by:
This is my first try at using AJAX. I want the calendars to be enabled if the user checks CheckBox1. It works OK for a normal all page refresh but once I introduced the AJAX code it stopped...
5
by: Dave | last post by:
I am new to Visual Web Developer 2005 Expres. I am using absolute positioning and every time I add a button control to my web form its width extends all the way to the edge of the page. IOW I...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.