如何檢查是否在JavaScript和PHP中設置了jQuery屬性？

Question

在我開始之前，讓我澄清我是jQuery和JavaScript的新手。我很抱歉，如果答案是明顯的 好吧，我想創建一個頁面，用戶可以選擇日期和時間，並且想要使用JavaScript和PHP來確保用戶沒有返回一個空白字段（如沒有日期或時間設定並點擊提交）。我使用Jon Thornton的jQuery datepicker和一個時間選擇器。我成功創建了顯示該字段的字段，但我不知道用JavaScript調用它的正確方法並檢查。這裏是我的代碼截至目前：

<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> 

當我點擊按鈕提交，我沒有被警告日期沒有設置。如果你能告訴我一個方法，它會感激你。 提前謝謝！

Answer 1

爲了更進一步，爲什麼不實施jQueryValidate？ （https://jqueryvalidation.org/）

這是你需要的東西在這裏 當你正在實施其他驗證功能，這是值得加入少許矯枉過正，但只需在輸入要素加上「必需的」，它會做你問什麼 - 當你開始更多的開發時，你會非常喜歡可用的附加功能。

<!-- 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> 

該代碼未經測試寫入，但應足以讓您開始。