I need help validating a form with JQUERY METHODS ONLY. JAVASCRIPT IS NOT ALLOWED.

This is what the form is supposed to do, and I am NOT SUPPOSED TO CHANGE ANY HTML OR CSS. I am only able to create a jQuery method to complete this assignment. Specifically, I am supposed to use .validate(). I have it in the code, however it currently doesn nothing. feel free to change that if you find something that works

Here is my code:

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);

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

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

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

});

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

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

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

$('#loginDiv form').validate({

});

});

});

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.

Copyright © Local jQuery User Group

X

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