<form id = "form">
<div>
<label for = "firstName">First Name</label>
<input type = "text" id = "firstName" placeholder = "Type First Name Here"
name = "firstName" required autofocus >
<br><br>
<label for = "lastName">Last Name</label>
<input type = "text" id = "lastName" name = "lastName">
</div>
<br>
<div>
<label for = "phone">Phone Number</label>
<input type = "tel" id = "phone">
</div>

<br>

<div> <p>
<label>Email</label>
<input type = "email" id = "email">

Password
<input type = "password" id = "pass">
</p>
</div>

<br>
<div> Which level of skill do you believe fits you (or your child) best?
</div>
Beginner<input type = "radio" value = "Beginner" name = "level">
Intermediate<input type = "radio" value = "Intermediate" name = "level">
Advanced<input type = "radio" value = "Advanced" name = "level">
<div id = "level"></div>
<br>
<br>

<label for = "age-spinner">Student Age</label>
<input id = "age-spinner" value = "5">

<br>
<br>
<div>Which days are you most available for a weekly piano lesson?</div>

<input type = "checkbox" value = "Monday" id = "monday" name = "days">Monday
<input type = "checkbox" value = "Tuesday" id = "tuesday" name =
"days">Tuesday
<input type = "checkbox" value = "Wednesday" id = "wednesday" name =
"days">Wednesday
<input type = "checkbox" value = "Thursday" id = "thursday" name =
"days">Thursday
<input type = "checkbox" value = "Friday" id = "friday" name = "days">Friday
<input type = "checkbox" value = "Saturday" id = "saturday" name =
"days">Saturday
<br>
<br>
<div>Best starting date? </div>
<input type = "text" id = "startDate">
</form>
<br><br>

<input type = "submit" id = "submit">
<button type= "button" id = "reset">Reset</button>

$( "input[type='submit']" ).button();

$.validator.setDefaults({
    submitHandler: function(){


    var firstName = $("#firstName").val();
    var lastName =$("#lastName").val();
    var phone = $("#phone").val();
    var email = $("#email").val();
    var pass = $("#pass").val();
    var age = $("#age-spinner").val();
    var level = $("input[name='level']:checked").val();
    var startDate = $("#startDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
    var days = " ";

//function to fill in data inputted from days
$("input[name='days']:checked").each(function(){
    days += $(this).val() + ", "
});

$("#output").append("<br><br>Name: " + firstName + " " + lastName)
            .append("<br>Phone #: " + phone)
            .append("<br>Email: " + email)
            .append("<br>Password: " + pass)
            .append("<br>Student Age: " + age)
            .append("<br>Student Level: " + level)
            .append("<br>Proposed Start Date: " + startDate)
            .append("<br>Available Days: " + days);

alert("Passed validation and submitted.");
}//end submitHandler
});

$("#form").validate();