Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,159 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,159 Points

Include datepicker in form jquery

I am trying to design a tab layout with jquery. The first page is a form with a datepicker that is supposed to be validated on submission. I can design a form with first and last name that validate on submission I can design a page with a datepicker that works. I cannot figure out how to include the datepicker in the form, assign the chosen date to variable and validate it the datepicker doesn't work, or (if I am distracted or frustrated) the form doesn't work

Would appreciate any hints you might have out there in the hive mind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Health Care Exchange</title>
    <link rel="stylesheet" href="assignment_7.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
     <link rel="stylesheet" href="../jquery-ui-1.11.4.custom/jquery-ui.min.css">
    <!-- jQuery UI library -->
    <script src="../jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
    <!-- jQuery call to the autocomplete() method. An array of items is passed in as a parameter. -->
    <script src="assignment_7.js"></script>
    <script>
        $(document).ready(function() {
            $("#datepicker").datepicker();
        });
    </script>

</head>
<body>
    <div class="container">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>

    </ul>

    <div id="tab-1" class="tab-content current">
          <h1>Sign Up</h1>
        <form id="signup_form" name="email_form" action="join.html" method="get">

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name">
            <span id="first_name_error">*</span><br>
            <br/>
            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name">
            <span id="last_name_error">*</span><br>             
            <br/>
            <label>Arrival date:</label>
            <label><input type="text" id="datepicker"></label>
            <span id="date_error">*</span><br>
            <label>&nbsp;</label>
             <br/>
            <input type="button" id="join_list" value="Sign Up"><br>
        </form>
    </main>
    </div>
    <div id="tab-2" class="tab-content">

    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

</div><!-- container -->

</body>
</html>

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })


    $("#join_list").click(



        function() {

            var isValid = true;

            // validate the first name entry  
            if ($("#first_name").val() == "") {
                $("#first_name_error").text("This field is required.");
                isValid = false;
            } 
            else {
                $("#first_name_error").text("");
            }

            if ($("#last_name").val() == "") {
                $("#last_name_error").text("This field is required.");
                isValid = false;
            } 
            else {
                $("#last_name_error").text("");
            }

            if(dateText == ""){
                $("#date_error").text("Please pick a start date.");
                isValid = false;

            }

            // submit the form if all entries are valid
            if (isValid) {
                $("#signup_form").submit(); 
            }
        } // end function
    );  // end click
    $("#first_name").focus();
}); // end ready

html {
    background-color: #ffdd99;
}

body{
            margin-top: 100px;
            font-family: 'Trebuchet MS', serif;
            line-height: 1.6

        }
        .container{
            width: 800px;
            margin: 0 auto;
        }



        ul.tabs{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul.tabs li{
            background: none;
            color: #222;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        ul.tabs li.current{
            background: #ededed;
            color: #222;
        }

        .tab-content{
            display: none;
            background: #ededed;
            padding: 15px;
        }

        .tab-content.current{
            display: inherit;
            background-color: #ccffcc;
            border: 3px dotted blue;
        }
benjaminfarnham
benjaminfarnham
8,055 Points

So if I understand correctly, you are trying to figure out how to:

1) Create a datepicker / add a pre-existing one to your form 2) Validate the date added as an actual date

Correct?

Ok, for the first issue, date pickers are kind of a tedious thing to build but it all comes down to knowing the date object inside and out. Having just build one from scratch for my front end framework (you can see the date picker code I wrote here - and please understand, 1) this is by no means fully featured and 2) this is written in plain JavaScript), I can confidently say that it would make the most sense to integrate a date picker that has already been built. Now this is not me saying that you shouldn't build one, but if you are working on this for a client, open source is your friend ;).

With different date pickers you will have different ways to install but each of these will provide their own documentation on how to add their date picker.

As for validation, few things you need to do. First, make sure your webform date input field has a 'name' attribute. For example:

<input type="date" name="mydate" id="mydate" />
<!-- Or, if you want to validate yourself, you could write it in a 'text' input -->
<input type="text" name="mydateTextfield" id="mydateTextfield" />

Now, about the 'type=date' attribute... most browsers have their own date pickers built in. Are they pretty? No, but they cover most of the validation for you right then and there. But all it requires is having the 'type' attribute equal 'date'.

If you go the custom route (plugins, etc.) and you need to write your own validation, it is pretty easy. First, place the value of your date field inside a date object to see if it returns a valid date. If it does, then your in the clear and can allow users to continue. If not, it will throw a string with a value of 'Invalid Date'. I use the following 'if' statement for checking if it is a valid date or not.

const $dateElement = $('#datepicker');
if ($dateElement.val() !== '' && new Date($dateEelement.val()).toString() !== 'Invalid Date') {
    // Datepicker is valid, continue on
} else {
    // Either the value is empty or the date object returned an invalid date.
}

Whats going on here:

1) We are assigning out date picker element to a variable. 2) Checking if the value of the submitted date picker element is NOT empty 3) AND (&&) checking to see if the submitted date is NOT an 'Invalid Date' 4) If both tests pass, the value is validated 5) ELSE we throw an error due to failed validation

Pretty wordy but I hope this helps. The date object is really powerful and you can do some really cool things with it. Feel free to read up on the date object here

Best wishes!

1 Answer

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,159 Points
Nancy Melucci
Nancy Melucci
Courses Plus Student 36,159 Points

Don't apologize I am beyond grateful. I am using a widget. I'll study your answer and see if I can add the validation.

thanks so much.

Nancy M.