How to check if jQuery properties have been set in JavaScript and PHP?

Question

Before I being, let me clarify I am a newbie to jQuery and JavaScript. I'm sorry if the answer is obvious Okay, I am trying to create a page where the user can select dates and times, and want to use JavaScript and PHP to make sure the user is not returning a blank field (like no date or time set and clicks submit). I am using jQuery's datepicker and a timepicker from Jon Thornton. I successfully created the fields to display that, but I don't know the proper way to call it in JavaScript and check. Here is my code as of now:

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type='text/javascript' src='../jQuery/jonthornton-jquery-timepicker-dbdea8e/jquery.timepicker.js'></script>
<link rel='stylesheet' href='../jQuery/jonthornton-jquery-timepicker-dbdea8e/jquery.timepicker.css'>
<script>
  $( function() {
    $( "#datepicker" ).datepicker({maxDate: "+2M", dateFormat: 'yy-mm-dd'});
  } );
    $(function(){
   $('.scrollDefaultExample').timepicker({ 'scrollDefault': 'now' }); 
});
</script>

<script>
function validateForm() {
    var date = document.forms["Time_Slot"]["datePick"].value;
    var date2 = document.getElementById("datepicker");
    var main_timeSlot = document.forms["Time_Slot"]["timeSlot"].value;
    var add1 = document.forms["Time_Slot"]["additional_1"].value;
    var add2 = document.forms["Time_Slot"]["additional_2"].value;
    var add3 = document.forms["Time_Slot"]["additional_3"].value;
    var add4 = document.forms["Time_Slot"]["additional_4"].value;
    var add5 = document.forms["Time_Slot"]["additional_5"].value;
    var add1Box = document.forms["Time_Slot"]["additional_1_box"].value;
    var add2Box = document.forms["Time_Slot"]["additional_2_box"].value;
    var add3Box = document.forms["Time_Slot"]["additional_3_box"].value;
    var add4Box = document.forms["Time_Slot"]["additional_4_box"].value;
    var add5Box = document.forms["Time_Slot"]["additional_5_box"].value;
    alert("yolo");
    console.log(date);
    if (date2 == null || date == "" || date == " ") {
        alert("A date must be chosen!");
        return false;
    }
    else if (lname == null || lname == "" || lname == " ") {
        alert("The last name field should be complete!");
        return false;
    }
    else if (email == null || email == "" || email == " ") {
        alert("The email field should be complete!");
        return false;
    }
    else if (password == null || password == "" || password = " ") {
        alert("A valid password must be entered! Note: it cannot contain just a space.");
        return false;
    }
}
</script>

<form name="Time_Slot" method="POST">
    <fieldset>
        <p>Date: <input type="text" id="datepicker" name="datePick"></p>
        <p>Time: <input type="text" class="scrollDefaultExample" name="timeSlot"></p>
        <br>
        <label><input type="checkbox" name="additional_1" value="extra_1"> Additional Time Slot: <input type="text" class="scrollDefaultExample" name="additional_1_box"></label> <br><br>

        <label><input type="checkbox" name="additional_2" value="extra_2"> Additional Time Slot: <input type="text" class="scrollDefaultExample" name="additional_2_box"></label> <br><br>

        <label><input type="checkbox" name="additional_3" value="extra_3"> Additional Time Slot: <input type="text" class="scrollDefaultExample" name="additional_3_box"></label> <br><br>

        <label><input type="checkbox" name="additional_4" value="extra_4"> Additional Time Slot: <input type="text" class="scrollDefaultExample" name="additional_4_box"></label> <br><br>

        <label><input type="checkbox" name="additional_5" value="extra_5"> Additional Time Slot: <input type="text" class="scrollDefaultExample" name="additional_5_box"></label> <br><br>

        <p><input type="submit" name="submit" value="Create Available Appointments"  onclick="return validateForm()"></p>
    </fieldset>
</form>

When I click on the button to submit, I am not being warned that the date is not set. It would be grateful of you if you can show me a way. Thank you in advance!

`console.log(date)` in `validateForm` to see what value you are getting when nothing is selected — Jaromanda X, Oct 26 '16 at 05:20
it says "create_dates.inc.php:44 Uncaught ReferenceError: Invalid left-hand side in assignment" — arthrax, Oct 26 '16 at 05:23
well that doesn't look like any of the code you posted, so there's something else wrong ... as well — Jaromanda X, Oct 26 '16 at 05:24
oh wait true. I had few more columns that I took out since it looked redundant. I am updating it now. I'm really sorry about that. — arthrax, Oct 26 '16 at 05:26
still no invalid left-hand side - surely your browser shows the line at fault — Jaromanda X, Oct 26 '16 at 05:28
I forgot to put two "=" in line 44, that's what the console was warning me. Doing that fixed it. THANK YOU SO MUCH!! — arthrax, Oct 26 '16 at 05:33

score 1 · Answer 1 · answered Oct 26 '16 at 05:27

1

To take this a little further, why not implement jQueryValidate? (https://jqueryvalidation.org/)

~~It's a little overkill for what you need here~~ As you're implementing other validation functions it's worth adding, but simply by adding "required" in the input element, it will do what you ask - and when you start developing more you'll really like the additional features available.

<!-- include the validation script, from CDN or download -->
<script src='    http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js'></script>

<!-- On document ready, find hte form and add the validation function -->
<script>
   $.ready(function() {
         $('form[name="Time_Slot"]').validate();
   });
</script> 

<!-- In the input, add "required" -->
<input type="text" id="datepicker" name="datePick" required>

The code is written untested, but should be enough to get you started.

answered Oct 26 '16 at 05:27

Robbie

17,605
4
35
72

Thank you so much for that trick. But one of my requirements was to specifically use JavaScript to validate the values. Still thank you so much for this :) – arthrax Oct 26 '16 at 05:29
This is Javascript. But if you need to do really specific things, jQueryValidate is very flexible that you can add any javascript specific validation for those (rare) cases that the in-built functions don't work. It just better handles the trapping submit, displaying errors and a lot of code you're going to be writing anyway. By default it display errors, but you can trap that and change to `alerts()` if you want. Anyhow, your choice, but I'd encourage you to check it out. – Robbie Oct 26 '16 at 05:48
Thank you so much! Now I have more tricks up the sleeve to boast to my friends (we are just starting on this) :) – arthrax Oct 26 '16 at 05:50

How to check if jQuery properties have been set in JavaScript and PHP?

1 Answers1