0

その前に、私が jQuery と JavaScript の初心者であることを明確にさせてください。答えが明らかな場合は申し訳ありません。わかりました。ユーザーが日付と時刻を選択できるページを作成しようとしています。JavaScript と PHP を使用して、ユーザーが空白のフィールドを返さないようにしたいと考えています (日付がない、または時間を設定し、送信をクリックします）。jQuery の datepicker と Jon Thornton の timepicker を使用しています。それを表示するフィールドを正常に作成しましたが、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>

送信するボタンをクリックしても、日付が設定されていないという警告が表示されません。方法を教えていただけると助かります。前もって感謝します！

4

1 に答える 1

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>

コードはテストされていませんが、始めるには十分なはずです。

于 2016-10-26T05:27:58.167 に答える