asked on

Date validation and invalidate form and highlight field

Hi,

I want to invalidate my form using jQuery/Javascript.

User enters date field (having id# vhdnPickUpDate) and time field (having id# vPickUpTime)

User should not be able to submit the form if date time is less than 4 hrs which user has entered.

Current time is in field hdnDateTime from where date time needs to compare.

I need to know the logic for this.
How to invalidate the form if datetime is less than or equal to 4 hrs.
Also, accordingly date field needs to be highlighted.

Kindly advise me the solution.

Below is the logic required and details.

var form = $("form");

hdnDateTime= "04/08/2018 07:30:00"

vPickUpDate="04-08-2018"

vPickUpTime="5:30 AM"

var dtTime = vhdnPickUpDate +" "+ vPickUpTime=;
var dtTimeMinus4Hrs = dtTime - 4 hrs;

if(hdnDateTime <= dtTimeMinus4Hrs)
{

invalidate form
Highlight field with id = Item_PickUpDate
// Kindly advise me the solution
}

form.validate();
if (form.valid()) {

}else {
   $('form').validate().focusInvalid();
 }

Open in new window

Regards,

Swatantra Bhargava

Made the changes as per your requirement in the below code and check result:

hdnDateTime= "04/08/2018 07:30:00"
  
  // get system local time
  var d = new Date();
  var m = d.getMinutes();
  var h = d.getHours();
  if(h == '0') {h = 24}
  
  var currentTime = h+"."+m;
  console.log(currentTime);
 
  // get input time
  var time = hdnDateTime.split(":");
  var hour = time[0];
  if(hour == '00') {hour = 24}
  var min = time[1];
  
  var inputTime = hour+"."+min;
  console.log(inputTime);
  
  var totalTime = currentTime - inputTime;
  console.log(totalTime);
  
  if ((Math.abs(totalTime)) > 4) {
    console.log("sufficient time");
  } 
  else {
	console.log("Less time");
  }

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lenamtl

Don't forget to validate using server side as JavaScript validation is not enough.

Dinesh Bali

ASKER

Thanks for your reply

I tried to implement the method. In OnClick method

I have written below code which is not working.

At the time of debugging it is not even going to check the condition inside the method
Please advise.

 $('.add-booking-btn').click(function (e) {

var userSelectedDateTime= "04/08/2018 07:30:00"
var et =document.getElementById("hdn-DateTime");
var hdnDateTime =document.getElementById("hdn-DateTime").value;

jQuery.validator.addMethod("validatePickUpDateTime", function (userSelectedDateTime, et) {
                    if (userSelectedDateTime >= hdnDateTime) {
                        return false;
                    } else {
                        return true;
                    };
                }, "Error Message");


  });

Open in new window

Dinesh Bali

ASKER

Thanks Swatantra for your code.

I need to invalidate the form and in case of validation failed then highlight field hdn-DateTime
I wanted to give same behavior to the form validation as other fields has.

I consolidated you code with mine. Please see below

How should I validate form and highlight field with my custom logic?
Please advise.

$('.add-booking-btn').click(function (e) {
var form = $("form");
hdnDateTime= "04/08/2018 07:30:00"
var userSelectedDateTime= "04/08/2018 07:30:00"
var et =document.getElementById("hdn-DateTime");
var hdnDateTime =document.getElementById("hdn-DateTime").value;

jQuery.validator.addMethod("validatePickUpDateTime", function (userSelectedDateTime, et) {
                    

// get system local time
  var d = new Date();
  var m = d.getMinutes();
  var h = d.getHours();
  if(h == '0') {h = 24}
  
  var currentTime = h+"."+m;
  console.log(currentTime);
 
  // get input time
  var time = hdnDateTime.split(":");
  var hour = time[0];
  if(hour == '00') {hour = 24}
  var min = time[1];
  
  var inputTime = hour+"."+min;
  console.log(inputTime);
  
  var totalTime = currentTime - inputTime;
  console.log(totalTime);
  
  if ((Math.abs(totalTime)) > 4) {
    return false;
  } 
  else {
    return true;
  }

                }, "Error Message");


form.validate();
if (form.valid()) {

}else {
   $('form').validate().focusInvalid();
 }


  });

Open in new window

Please see if anyone can also advise on this issue.