How to validate form using JavaScript?

Question

I am not able to validate form, there is two fields in my form, one is select dropdown, and one is datepicker.

I want when someone select urgent Processing in select dropdown and they select their date of journey between 5 days from today, form should show a message "For travel within next 5 days please select Urgent Processing in the Application Type. With normal Processing you can only travel after 5 day" and prevent submit. but it seems not to working. Where I am wrong here?

<form name="search_form" method="post" onSubmit="onSubmit="return chk();" action="applyprocess.php" autocomplete="off">

  <select name="applicationtype" class="textBoxDashed"  id="applicationtype" onChange="myFunction(this)" required>
    <option value="">Select..</option>
    <option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
    <option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
  </select>

  <input name="journeydate" id="journeydate" placeholder="DD/MM/YYYY" datepicker_format="DD/MM/YYYY" class="textBoxDashed" size="43" title="Please Enter your Date of Journey" required readonly>
  <input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>

This is form validation script

<script language="javascript">

    if (trim(document.search_form.journeydate.value)==''){
    alert("Please Enter Valid Journey Date  ");
    document.search_form.journeydate.focus();
    return false;
    }

                    var today = new Date();
                    var dd = today.getDate()+1;
                    var mm = today.getMonth()+1;//January is 0!`

                    var yyyy = today.getFullYear();
                    if(dd<10){dd='0'+dd}
                    if(mm<10){mm='0'+mm}
                    var todayDate = dd+'../https/websitedownloaderio/MS_8.html'+mm+'/'+yyyy;
                    var number13 = Number(dd);
                    var monthNumber = Number(mm);
                    var yearNumber = Number(yyyy);
                    var currentDays = (monthNumber*30)+number13;

                    var jDate = document.search_form.journeydate.value;
                    var dd2 = jDate.slice(0,2);
                    var number12 = Number(dd2);
                    var mon2 = jDate.slice(3,5);
                    var yr2 = jDate.slice(6,10);
                    var monthNumber2= Number(mon2);
                    var yearNumber2 = Number(yr2);
                    var journeyDays = (monthNumber2*30)+number12;

                    if(number12>number13){
                    number12 = number12+30;
                    monthNumber2 = monthNumber2-1;
                    }
                    if(monthNumber2>monthNumber){
                    monthNumber2 = monthNumber2+12;
                    monthNumber2 = monthNumber2-1;
                    }

                    if(yearNumber2>yearNumber){
                    yearNumber2 = yearNumber2-yearNumber;
                    }

                    var finalDays = ((yr2-yyyy)*360)+((mon2-mm)*30)+(dd2-dd);

    if(trim(document.search_form.applicationtype.value)=='Normal Processing' && finalDays<=5)
        {
            alert("For travel within next 5 days please select Urgent Processing in the Application Type. With normal Processing you can only travel after 5 day.");
            document.search_form.applicationtype.focus();
            return false;
        }
    if(trim(document.search_form.applicationtype.value)=='Urgent Processing' && finalDays>=30)
        {
            alert("Please select normal processing from the drop down because your arrival date is beyond 30 days.");
            document.search_form.applicationtype.focus();
            return false;
        }

</script>

This is what I am using for datepicker:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

  $( function() {
    $( "#journeydate" ).datepicker({
      yearRange: '2018:2028',
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      minDate: +1
    });
  } );    
  </script>

Answer 1

为什么不将所选日期转换为UTC日期，然后检查现在+ 5 * 60 * 60 * 24是否大于该日期？

Answer 2

Well I didn't use Jquery for now, If you want to then you can use it. And I think this should solve your problem.

<html>

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script language="javascript">

function myFunction() {
  var message,
    aptype = document.getElementById('applicationtype'),
    strVal = aptype.options[aptype.selectedIndex].value;
  if (strVal == "Normal Processing") {
    message = "Please Select Date between 5 days from now";

  } else {
    message = "Please Select Date between 10 days from now"

  }
  //let message = document.getElementById('message').value;
  document.getElementById('message').innerHTML = message;
  console.log(message);
}
function compareDate(e) {
  var selectedDate = document.getElementById('journeydate').value,
    today = new Date(),
    future_date = new Date(today.setDate(today.getDate() + 5));

  if (selectedDate < new Date() || selectedDate > future_date) {
    console.log("successfully Selected Date");
  } else {
    //message = "Please Select Date between 5 days from now";
    console.log("Please Select Date between 5 days from now");
  }
  e.preventdefault();
  }
 </script>
</head>

<body>
<form name="search_form" method="post" onSubmit="compareDate();" action="" autocomplete="off ">

<select name="applicationtype" class="textBoxDashed" id="applicationtype" onChange="myFunction(this)" required>
  <option value=" ">Select..</option>
  <option data-price="69" value="Normal Processing">Normal Processing (Processing Time 4 to 7 Business days)</option>
  <option data-price="189" value="Urgent Processing">Urgent Processing (Processing Time 1 Business Day) </option>
</select>
<div id="message"></div>
<input type="date" name="journeydate " id="journeydate" placeholder="DD/MM/YYYY ">
<!-- <input  datepicker_format="DD/MM/YYYY " class="textBoxDashed
" size="43" title="Please Enter your Date of Journey " required readonly> -->
  <input name="button" type="submit" class="btn btn-primary" value="Continue">
</form>
</body>

</html>

Answer 3

What if you used a date input field ?

 (() => { const checkMark = document.querySelector("#checkedOk"); const dateInput = document.querySelector("#dateField"); document.querySelector("#checkDate").addEventListener("click", dateCheck); function dateCheck() { const value = new Date(dateInput.value); const isOk = value && value >= new Date(dateInput.min) && value <= new Date(dateInput.max); if (isOk) { checkMark.classList.add("ok"); } else { checkMark.classList.remove("ok"); } return isOk; } })(); 

 body { font: normal 12px/15px verdana, arial; margin: 2em; } #checkedOk:before { color: red; font-weight: bold; content: "X"; } #checkedOk.ok:before { content: "\\2714"; color: green; } 

 <input id="dateField" type="date" min="2018-01-01" max="2028-12-31"> <button id="checkDate">Check</button> <span id="checkedOk"></span>