how to validate value from input field through javascript

Question

I have two text field on which when I take my mouse,then calender along with text to enter time appears in both the textfield. First textfield should be less than another textfield.For this I used javascript but its not working.My code for this is:-

<form method="post" action="Compvac8.jsp">
Select Reference:
<select name="ref_logtime" >
<option value="Select">Select</option>
<c:forEach var="aff" items="${obj.connect()}">
<option value="${aff.value}">${aff.key} ${aff.value}</option>
</c:forEach>
</select>

<br><br>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>

<input id="startdate" type="text" size="25" name="startdate" onclick="javascript:NewCal('startdate','ddmmmyyyy',true,24)" >
<a>
<img src="images/cal.gif" width="10" height="10" border="0" alt="Pick a date">
</a>

<input id="enddate" type="text" size="25" name="enddate" onclick="javascript:NewCal('enddate','ddmmmyyyy',true,24)" >
<a>
<img src="images/cal.gif" width="10" height="10" border="0" alt="Pick a date">
</a>

 <input type="submit"  onclick="date_comapare()" value="Submit"><br>

</form>

Javascript code is-

  function date_comapare()
{

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date
   //if (new Date(d2).valueOf() < new Date(d1).valueOf()) 
       alert(d1);
   alert(d2);
   if(new Date(d2).getTime() < new Date(d1).getTime())

   {
      alert("Endate date should be greater than start date");  // handle  your error validation here
      return false;
   }return true;
}
</script>

I even also tried folowing in javascript-

if(d2 < d1)
   {
      alert("Endate date should be greater than start date"); 
      return false;
   }

I want my startdate to be lesser than enddate.How to do that.I can use server side validation also.

dear @tiddi rastogi, plz change getElementIdBy in your code to getElementById — Vikrant
– Vikrant, Commented Mar 9, 2015 at 8:38

user1334319 · Accepted Answer · 2015-03-09 08:41:24Z

2

Wrong function on Document, needs to be:

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date

You're passing strings instead of variables.

if(new Date(d2).valueOf() < new Date(d1).valueOf())

Please make sure the values you're initializing Date with are valid constructor arguments. MDN has a great page here

answered Mar 9, 2015 at 8:41

user1334319

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

3 Comments

tiddi rastogi Over a year ago

I tried but ,when I click submit and enddate is smaller than startdate then no error or alert message is shown.

tiddi rastogi Over a year ago

can't I directly use d2 instead of new Date(d2)

user1334319 Over a year ago

This really depends on the value of "d2". Please refer to the page I linked.

Arun P Johny · Accepted Answer · 2015-03-09 08:41:21Z

1

You have 2 problems, it should be getElementById not getElementIdBy then d1 and d2 are variables not string literals

function date_comapare() {

    var d1 = document.getElementById("startdate").value; // start date
    var d2 = document.getElementById("enddate").value; //end date

    if (new Date(d2) < new Date(d1)) {
        alert("Endate date should be greater than start date"); // handle  your error validation here
        return false;
    }
    return true;
}

answered Mar 9, 2015 at 8:41

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

tiddi rastogi Over a year ago

I tried but ,when I click submit and enddate is smaller than startdate then no error or alert message is shown.

SansWord · Accepted Answer · 2015-03-09 08:40:39Z

0

You have to return true in date_compare function

<script type="text/javascript">
function date_comapare()
{

   var d1=document.getElementById("startdate").value; // start date
   var d2=document.getElementById("enddate").value; //end date

   if(new Date('d2').valueOf() < new Date('d1').valueOf())
   {
      alert("Endate date should be greater than start date");  // handle      your error validation here
      return false;
   }

   return true; // <------ here, you should return true.

}

answered Mar 9, 2015 at 8:40

SansWord

914 bronze badges

2 Comments

Arunprasanth K V Over a year ago

why did you use single quotes inside Date() function like Date('d2') ??

tiddi rastogi Over a year ago

I tried but ,when I click submit and enddate is smaller than startdate then no error or alert message is shown.

Med.Amine.Touil · Accepted Answer · 2015-03-09 09:00:25Z

0

Use the date.getTime Method

if (new Date(d2).getTime()  <  new Date(d1).getTime()) {}

edited Mar 9, 2015 at 9:00

answered Mar 9, 2015 at 8:41

Med.Amine.Touil

1,2352 gold badges12 silver badges15 bronze badges

4 Comments

Taryn Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

Arunprasanth K V Over a year ago

@tiddirastogi is it the date picker is working perfectly ?? i mean when you click on the textbox then a calender will appear and there you can select your date ?? is it came like that ???

Arunprasanth K V Over a year ago

try with button type="button" and come to chat in the above comment lin

tiddi rastogi Over a year ago

@ArunprasanthKV,it shows the alert message of if ,but when I click on ok of message box,it is being redirected to next page.

3 revs · Accepted Answer · 2015-03-09 09:23:45Z

0

Well,I don't know what's the use of NewCal,If that makes a well formatted Date try this:

new Date(d2).valueOf() < new Date(d1).valueOf()

Date accept a time value as parameter that may be a number or like '2010/2/1' or 'December 17, 1995' etc.In your case,try to validate it like console.log(new Date(d1)).

To use console.log(),You have to make firebug installed in your firefox.Without that you can use alert.Put it in your function right after d1 is assigned. like var d1=...;alert(new Date(d1)) . @Arunprasanth KV '9-10-2015' is not a valid Date() parameter.

edited Mar 9, 2015 at 9:23

community wiki

3 revs
aboutqx

3 Comments

tiddi rastogi Over a year ago

what does this console.log() owrkand how to use it to validate .?

tiddi rastogi Over a year ago

What does console.log()do and how to use uit to compare values of both the input fields?

Arunprasanth K V Over a year ago

i had update fiddle with valid date time thanks for corrections

Collectives™ on Stack Overflow

how to validate value from input field through javascript

5 Answers 5

3 Comments

1 Comment

2 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related