I'm trying to validate a box by using jQuery. I need to put an error message where the #error id is, however I'm not sure how to do it.

My teacher says I am NOT supposed to use the .validate() method, and that I'm supposed to use an if/else statement similar to

if(if username is empty or pw is empty){ display an error message } else { display a success message }

but for some reason I just can't seem to get it to work.

Here is the code, please help! The form is within the login panel that opens when the login text is clicked on.

body {

background-color: #fff;

font-family: arial, sans-serif;

font-size: 100%;

}

a {

color: blue;

}

#welcome p strong {

color: navy;

font-size: 1.2em;

}

#welcome p:first-of-type {

margin-bottom: 50px;

}

section {

margin-bottom: 50px;

}

/* main container */

#main {

width: 960px;

margin: 50px auto;

border: 2px solid #000;

padding: 20px;

background-color: #e0e0ff;

position: relative;

box-sizing: border-box;

}

/* form container */

#loginDiv {

width: 300px;

position: absolute;

left: 650px;

top: 6px;

z-index: 100;

border: 1px solid navy;

}

/* paragraph that shows the text "Login" which is clicked on to display/remove the form */

#login {

margin: 0;

cursor: pointer;

background-color: rgb(255,255,255);

padding: 5px 0 2px 30px;

}

#login:hover{

background-color: rgb(110,138,195);

}

/* plus sign icon for login form */

.plus {

background: url(img_open.png) no-repeat 8px 7px;

background-color: rgb(110,138,195);

}

/* minus sign icon for login form */

.minus {

background: url(img_close.png) no-repeat 8px 7px;

}

/*form is hidden when the page loads */

#loginDiv form {

padding: 10px 10px 10px 10px;

display: none;

background-color: rgb(255,255,255);

}

#loginDiv label {

display: block;

width: 100px;

margin: 0 15px 0 0;

}

#loginDiv input {

font-size: 1.2em;

border: 1px solid navy;

}

#loginDiv input:focus {

background-color: rgb(110,138,195);

border: 2px solid navy;

}

#loginDiv input[type=button] {

width: 100px;

}

footer {

text-align: center;

margin-top: 50px;

margin-bottom: 10px;

padding: 20px;

border-top: 1px solid #000;

}

/* ad is not shown when the page loads */

#ad {

width: 300px;

height:300px;

border: 1px solid #000;

background-color: yellow;

position: absolute;

left: 330px;

top: -500px; /* you can change this initially for viewing purposes only but be sure to set it back */

box-sizing: border-box;

background-image: url(ad.jpg);

background-repeat: no-repeat;

}

/* close button on ad */

#adbtn {

width: 50px;

height: 50px;

border: 2px solid #000;

border-top-width: 1px;

border-right-width: 1px;

background-color: #fff;

font-size:3em;

text-align: center;

cursor: pointer;

box-sizing: border-box;

position: absolute;

top: 0px;

right: 0px;

}

// loads before anything else

$(document).ready(function(){

// brings ad down from -500px to 100px in duration of 5s

// delayed to not begin until 5s after page loads

$('#ad').delay(5000).animate({"top":"100px"}, 5000);

// makes X clickable and when clicked, removes ad and adbtn in 5s

$('#adbtn').click(function(){

$('#ad').fadeOut(5000);

$('#adbtn').fadeOut(5000);

});

// function to make login button + change to -

// slideToggle is used to allow user toggle whether

// the window is open or not, set to 2s duration

$('#login').click(function(){

$(this).toggleClass("minus");

$('#loginDiv form').slideToggle(2000);

});

$('#loginDiv form').submit(function(){

var username = $("#username").val();

var pw = $("#pw").val();

if (username == '' || pw == ''){

$("#error").html("

Okay

");

} else {

$("#error").html("

okayx2

");

}

})

});

Login

Username:

Password:

Welcome to the Local jQuery User Group Website

Click the login button at the top of the page to login. To become a member please Register

About this page layout:

The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to

that main container. Otherwise, it would default to being absolutley positioned with respect to the window.

In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,

it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of

the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.

This week's agenda:

There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.

It will be recorded! Please note that the code samples will be available on our GitHub repository.

X

The result should look like this:

Figure shows error message if one or both fields are empty. -Login Username Password Submit Please enter both login and password! Figure shows success message if both fields are not empty Login Username: eresa Password Submit Please stand by