I have the following HTML form:

<form id=ChartsForm>

    <div id=dateoptions>

        <p>Until date: <input type=date name=until_date value=Until date></p>

        <p>Since date: <input type=date name=since_date value=Since date></p>

    </div>

    <div class=insightsoptions>

        <input id=newLikes class=insightsbuttons type=submit name=submit value=Daily new likes>

        <input id=unlikes class=insightsbuttons type=submit name=submit value=Daily unlikes>

    </div>

</form>

and the following JQuery script:

$(function () {

    $(#newLikes).one('click', function () {

        $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:

            function(response) {

                alert(response);

                $(#dailyNewLikes).html(response);

            }});

        return false;

    });

    $(#newLikes).on('click', function(){

        $(this).toggleClass('green');

        $('#dailyNewLikes').toggle();

    });

How do I check if the inputs until_date and since_date are empty or not in the first place and if they are empty to stop the script before it executes the ajax call, alert the user about the mistake and then continue if the inputs are not empty anymore. I have to use .one(). I've tried with the .blur() function but with no effect...