Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Form Validation and Script.Aculo.us library

StematicaStematica Posts: 2Member
Hello everyone,

I am taking a class in college called Internet applications and have stumbled across a problem specifically with JavaScript. I am trying to validate a form and highlight the text box that does not meet the required input length. I have successfully generated errors using JQuery but this week's assignment requires me to use at least two effects from the Script.Aculo.us library with one of them being an auto complete feature. At this point I am stuck trying to get the code to recognize 'onblur', 'onkey' or 'onchange' event so I can then try to use the Script.Aculo.us library. I am pretty sure I am missing something obvious but I have played with this over week and I still do not understand what I am missing. I asked the someone please show me the error of my way and if possible I would like an explanation on how to apply effects from the library. Any help is welcome.

Thanks,

Kevin

Here's the Code:

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Registration







function validateFName(value)
{
var nf = document.getElementById("NameF").length;
if(nf < 2)
{
alert("Last Name too short")

new Effect.Highlight('NameF', {startcolor: "#ff0000"})
}
else {new Effect.Highlight('NameF', {restoreColor: "#000000"})}
}
function validateLName(value)
{
var nl = document.getElementById("NameL").length;
if(nl < 2)
{
alert("First Name too short")

new Effect.Highlight('NameL', {startcolor: "#ff0000"})
}
else {new Effect.Highlight('NameL', {restoreColor: "#000000"})}
}
function validateZipCode()
{
if(!isZipCode(value))
{
alert("Invalid Zip Code")

}
}


























































$(document).ready(function(e) {
$("#registrationForm").validate(
{
rules:
{
NameF:{required:true, minlength:2, maxlength:15},
NameL:{required:true, minlength:2, maxlength:15},
Address:{required:true, minlength:5, maxlength:30},
City:{required:true, minlength:2, maxlength:30},
Zip:{required:true, zipUS:true},
Phone:{reuired:true, phoneUS:true},
Email:{required:true, minlength:5,email:true}
},
messages:
{
NameF:"Please enter your full first name.",
NameL:"Please enter your full last name.",
Address:"Please enter your current mailing address.",
City:"Please enter your city name.",
Zip:"Please enter your 5 digit mailing zip code",
Email:"Email should be in the 'you@your.domain' format",
Phone:"Please enter your phone number"
}
}
);
});






[/code]

and the .CSS file:

[code]
@charset "utf-8";
/* CSS Document */

/*Site BackGround Color */
body {
background-color:#333333;
}
/*Navigation Bar */
#header p {
color:#CCC;
text-align:center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:24px;
margin: 0;
padding: 20px;
cellspacing: 0;
cellpadding: 0;
border-bottom: 3px solid black;
background-color: #222;
}

#regformbody {
color:#CCC;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
border: 1px groove black;
font-size:12px;
margin-left: 20%;
margin-right: 20%;
padding: 20px;
cellspacing: 0;
cellpadding: 0;
border: 1px solid black;
background-color: #222;
}

#regformbody label{
display:inline-block;
float:left;
clear:left;
width: 500px;
text-align:right;
}
#regformbody input{
display:inline-block;
float:left;
}
#regformbody select{
display:inline-block;
float:left;
}

#regformbody p{
display:inline-block;
text-align:center;
}
[/code]
Sign In or Register to comment.