By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,264 Members | 1,753 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,264 IT Pros & Developers. It's quick & easy.

[NEWBIE]Form Validation Approach Suggestions welcome!

100+
P: 121
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
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,387
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

100+
P: 121
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
Expert Mod 5K+
P: 5,387
hi ...

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

kind regards
Aug 20 '07 #4

100+
P: 121
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
Expert Mod 5K+
P: 5,387
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

Post your reply

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