Better way to do this - form simulation

[kdubbie]

Hello,

I was asked to create a simulation of a user login. There is no form validation or database involvement. I just have to create functional mockup of what I want to happen when a user logs in.

The simulation includes:
A login button, once the user clicks the login button a Modal Window pops up with two forms, one to sign in with a Username and Password, and one to sign in with an E-code. They sit on top of each other. (I have the modal plugin working, thats not what I need help with).

For simulation purposes; when the user Submits:
If the fields are left blank, an error message should appear above the form. But if the fields have ANY value in them, the forms should disappear and the text within the Login button, should change from "Click to Login" to "Welcome (value from form)". In the HTML markup I have a the error divs sitting above the form with a display of none.

Here is the code I used...Basically I have created two identical Click functions one for the Username and Password and one for the E-Code. This works, and does what it's supposed to, and even though this is a simple simulation, there must be an easier, more elegant way to do this.

Jquery:



$(function() {

$('#unp-submit').click(function() {
var unVal = $('#username').val();
var pwVal = $('#password').val();

function unpError() {
$('#unp-error').show();
}

if (unVal == "" || pwVal == "") {
unpError();
return false;
}
else {
hideBox();
$('#login-box').text("Welcome " + unVal);
return false;
}
});

$('#ec-submit').click(function() {
var ecVal = $('#ecode').val();

function ecError() {
$('#ec-error').show();
}

if (ecVal == "") {
ecError();
return false;
}
else {
hideBox();
$('#login-box').text("Welcome " + ecVal);
return false;
}
});

// functions

function hideBox() {
$('#login-form, #hidebox').hide();
}



(If your wondering why I created the functions unpError and ecError, I did this because when I was first trying to write the script, I was hoping to create one function that would display a generic error message for both forms, but I couldn't figure out how to make it work)


HTML:



<div id="login-form">
<div id="unp-error">Invalid Username and/or Password. Please try again.</div>
<form>
<label for="username">User Name:</label>
<input type="text" id="username" />
<br />
<label for="password">Password:</label>
<input type="text" id="password" />
<br /><br />

<input type="submit" id="unp_submit" value="Login"/>
<a href="unp-recover.html">Forgot your password?</a>

</form>
<hr />

<div id="ec-error">Invalid E-Code. Please try again.</div>
<form>
<label for="ecode">E-Code:</label>
<input type="text" id="ecode" />
<br /><br />

<input type="submit" id="ec_submit" value="Login"/> <a href="ec-recover.html">Forgot your E-Code?</a>


</form>

</div>



I was thinking that there should be much easier way to do this considering all the repeat code...I'm also open to doing away with the two error divs above the forms in the HTML markup if there is an easier way to append them with Jquery.


Thanks in advance for any help.