PDA

View Full Version : Form Validation

Stinger100
03-02-2006, 08:26 PM
hi,

I have just started learning Javascript. I was just wondaring if anyone can spot what is wrong with the below code i have done as it doesnt seem to work.

<html>
<head>
<script type="text/javascript">

var valid = 'abcdefghijklmnopqrstuvwxyz';
function CheckFieldA(fieldA){
if(!isValid(fieldA.value,valid)){
alert("invalid format for field a")
}
if(fieldA.value.length>50){
alert("a field should not be greater than 50 characters")
}
}
function checkFieldB(fieldB){
if(fieldB.substring(0,6)!="http://" || fieldB.substring ((fieldB.value.length-4),fieldB.value.length)){
alert("Filed b should be in http://mywebsite.com")
}
} function isValid(string,allowed) {
for (var i=0; i< string.length; i++) {
if (allowed.indexOf(string.charAt(i)) == -1)
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" method="post"
onSubmit="return CheckFieldA(document.myform)">

<pre>
Name of Hyperlink:<input type="text" name="fieldA")>
Category of Hyperlink: <input type="text" name="fieldB">
Hyperlink: <input type="text" name="Hyperlink">
Keyword <input type="text" name="Keyword">
Date <input type="text" name="Date">
</pre>

<input type="submit" name="submit" value="Submit">
</form>

thanks in advance.
Stinger
Beagle
03-02-2006, 09:50 PM
As a general rule, when requesting help from anyone, anywhere, its always best to describe your current state and desired state as fully as possible.

What is the code currently doing that you don't want it to?
What is the code currently NOT doing that you DO want it to?
Are you getting any error messages from your browser regarding your script?

Help us help you.
Stinger100
03-02-2006, 10:15 PM
Hi

Apologies for the ambiguity - I was in a state of confusion!

What I am trying to achieve is the following: a form that contains two fields, which should satisfy the following:

> Field A should not contain any numbers or be more than 50 characters long;
> The contents of Field B should start with "http://" and end with ".com";

Currently clicking the submit button does not bring any alerts or error msgs, but also doesnt perform the above.

Hope this clears things up.

Thanks.
Stinger.
Quentin441
03-02-2006, 11:14 PM
This sounds like a job for RegExp. Give this code a try and see if it does what your wanting.

<html>

<head>
<title>Form Validation with RegExp</title>
<script type="text/javascript">
<!--
function validate() {
var valid = true;
var fields = [
[document.forms[0].StringOnlyMax50, /^[a-zA-Z ]{0,50}$/, "This field requires 50 alphanumeric characters (i.e. a-z)"],
[document.forms[0].UrlOnly, /^http:\/\/[a-zA-Z0-9%. ]{0,}.com$/, "This field requires a valid url. (i.e. http://www.google.com)"]
];
for (var i = 0; i < fields.length; i++) {
if (!fields[i][1].test(fields[i][0].value)) {
alert(fields[i][2]);
fields[i][0].focus();
valid = false;
}
}
if (valid) {
// Your code here....
}
}
//-->
</script>
</head>

<body>
<form action="javascript: validate();">
Name of Hyperlink: <input name="StringOnlyMax50" /><br /><br />
Hyperlink: <input name="UrlOnly" /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>

</html>
Stinger100
03-03-2006, 12:09 AM
Quentin441,

thank you SO much! ...this is exactly what I have been trying to achieve! ...I have been keeping away from using RegEx's, however you have made such efficient use of them.

Thanks again for you help!
Stinger100
03-03-2006, 11:16 AM
Does anyone know the regular expression to check for:

-A field should be a maximum of 5 keywords and each keyword longer than 2 characters

I can only manage this :/^\w[a-zA-Z{0,5}]w[a-zA-Z]{2}$/,

which does not work.

Any ideas.

thanks
Stinger
Quentin441
03-03-2006, 02:41 PM
Here is the same script as before except I added another piece to the array a min value. So now it checks to see if it passes the min value and the RegExp. Just set this area to null if you don't want to force a min value on a field.

<head>
<title>Form Validation with RegExp</title>
<script type="text/javascript">
<!--
function validate() {
var valid = true;
var fields = [
[document.forms[0].StringOnlyMax50, /^[a-zA-Z ]{0,50}$/, 2, "This field requires 2 to 50 alphanumeric characters (i.e. a-z)"]
];
for (var i = 0; i < fields.length; i++) {
if (!fields[i][1].test(fields[i][0].value) || (fields[i][2] != null && fields[i][0].value.length < fields[i][2])) {
alert(fields[i][3]);
fields[i][0].focus();
valid = false;
}
}
if (valid) {
// Your code here....
}
}
//-->
</script>
</head>

<body>
<form action="javascript: validate();">
Name of Hyperlink: <input name="StringOnlyMax50" /><br /><br />
Hyperlink: <input name="UrlOnly" /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>

</html>