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>

this question has already been asked before, please refer to this link — Aquafreax
– Aquafreax, Commented Jun 23, 2018 at 9:31
@Aquafreax - I have checked, but i am not able to find issue in my script. Any Suggestion, it would be great. — Ojibix Creatives
– Ojibix Creatives, Commented Jun 23, 2018 at 9:37
Check: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date — KooiInc
– KooiInc, Commented Jun 23, 2018 at 11:23

C4pt4inC4nn4bis · Accepted Answer · 2018-06-23 09:47:30Z

0

Why don't you just convert the choosen date to a UTC date and then check if now + 5 * 60 * 60 * 24 is greater than that?

answered Jun 23, 2018 at 9:47

C4pt4inC4nn4bis

5981 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ojibix Creatives Over a year ago

i didnt got it dear. i am not that much advanced in programming, its schooling stage, can you demonstrate it, if possible. how can we do this.

C4pt4inC4nn4bis Over a year ago

One way to measure time in javascript is to convert a date of whatever format in seconds since 1.1.1970 (UTC format). This way you get a simple number. Just type Date.now() in console of your browser. By adding the seconds for 5 days you can compare both numbers to check if the coosen date is below 5 days into the future. Did that help?

Ojibix Creatives Over a year ago

Let me try, that you suggested.

Aquafreax · Accepted Answer · 2018-06-23 10:39:57Z

0

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>

answered Jun 23, 2018 at 10:39

Aquafreax

3264 silver badges16 bronze badges

2 Comments

Ojibix Creatives Over a year ago

wanted same thing, but there is one issue, i am facing after click on submit it shows the message but it also takes form to action page.

Aquafreax Over a year ago

Could you tell me, Whats the message shown & if its redirecting directly to action page, then try moving on action page from javascript

KooiInc · Accepted Answer · 2018-06-23 11:58:37Z

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>

Collectives™ on Stack Overflow

How to validate form using JavaScript?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related