Jquery, validating input before form submission

Question

I am writing a small jquery function that should check the selected input of four items. The selcted itmes are "time" in hours and minutes displayed as dropdown lists.

I have "From" hours and "From" minutes, "To" hours and "To" minutes.

I want to make sure that the "From" hours and minutes are less that the "To" hours and minuets and until this is correct hide the form submission button.

This is what I have:

function getvalHT(sel) {
var selectedFromHours   = $('#RoomFromTimeH').val();
selectedFromHours       = selectedFromHours.replace(/\b0+/g, '');
var selectedToHours     = $('#RoomToTimeH').val();
selectedToHours         = selectedToHours.replace(/\b0+/g, '');

var selectedFromMin     = $('#RoomFromTimeM').val();
selectedFromMin         = selectedFromMin.replace(/\b0+/g, '');
var selectedToMin       = $('#RoomToTimeM').val();
selectedToMin           = selectedToMin.replace(/\b0+/g, '');

if(selectedFromHours < selectedToHours) {
    alert ('The "To" hours must be greater than the "From" hours');
    $("#savebutton").hide();
} else if(selectedFromMin > selectedToMin) {
    alert ('The "To" minutes must be greater than the "From" minutes');
    $("#savebutton").hide();
} else {
    $("#savebutton").show();    
}

}

<select name="RoomToTimeH" id="RoomToTimeH" class="imaindateselTime" onchange="getvalHT(this);">

<select name="RoomToTimeM" id="RoomToTimeM" class="imaindateselTime" onchange="getvalHT(this);">

I have this part working but the submit button does not appear if the user selects the correct times.

Am I doing this correctly or am I way off.

Many thanks for your time.

is the input in 24 hour format or 12 hour format?

Rajshekar Reddy
– Rajshekar Reddy

2016-11-16 11:46:57 +00:00
Commented Nov 16, 2016 at 11:46 — Rajshekar Reddy
– Rajshekar Reddy, Commented Nov 16, 2016 at 11:46
Hi, its in 24 hour format

DCJones
– DCJones

2016-11-16 11:47:40 +00:00
Commented Nov 16, 2016 at 11:47 — DCJones
– DCJones, Commented Nov 16, 2016 at 11:47
can you post your full html code?

prasanth
– prasanth

2016-11-16 11:50:48 +00:00
Commented Nov 16, 2016 at 11:50 — prasanth
– prasanth, Commented Nov 16, 2016 at 11:50
@DCJones gave you my answer

Rajshekar Reddy
– Rajshekar Reddy

2016-11-16 11:58:21 +00:00
Commented Nov 16, 2016 at 11:58 — Rajshekar Reddy
– Rajshekar Reddy, Commented Nov 16, 2016 at 11:58
@Reddy, just checking it out.

DCJones
– DCJones

2016-11-16 11:59:08 +00:00
Commented Nov 16, 2016 at 11:59 — DCJones
– DCJones, Commented Nov 16, 2016 at 11:59

Rajshekar Reddy · Accepted Answer · 2016-11-16 11:58:04Z

Problem : if(selectedFromHours < selectedToHours) { the From hour is lesser than To hour so its valid But you are considering it as invalid. Also you should not check the Minutes unless the Hours are equal.

Solution:

The if logic must change a bit.

if(selectedFromHours < selectedToHours) {       
    $("#savebutton").show(); // since From hour is smaller don't care about minutes
} else if(selectedFromHours == selectedToHours && selectedFromMin < selectedToMin){
  $("#savebutton").show(); //Hours are same but from minute is smaller - VALID
}else {
  $("#savebutton").hide();  // any other condition hide the button
}

Explaining the logic

if(selectedFromHours < selectedToHours) { : If the From hour is lesser than To then there is no need to check for minutes. This is VALID
else if(selectedFromHours == selectedToHours && selectedFromMin < selectedToMin){ : If the From and To Hour are equal then we need to check the Minutes, From minutes must be smaller than To minutes. This is VALID
Any other condition is NOT VALID

Collectives™ on Stack Overflow

Jquery, validating input before form submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related