2016-04-06 12 views
0

javascriptを使用して単純なクライアントサイド検証を実行しようとしています.NextDateが前の日付よりも大きいかどうかを検証します。私はメソッドを呼び出しているonclick = "ValidateEndDate();"送信ボタンにしかし、それは動作していないようです。私は何をしているのかを理解する必要があります。事前にどうもありがとうございました。 :)NextDateは、以前の日付検証スクリプトよりも大きいはずです

<%-- 
Document : ctsCaseDetailRegistration 
Created on : Jan 16, 2016, 12:52:37 AM 
Author  : nishad 
--%> 

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<%@ page import="java.io.*,java.util.*,java.sql.*"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%> 
<!DOCTYPE html> 
<html> 
<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>User Registration</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/sb-admin.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
    <link rel="stylesheet" href="css/prism.css"> 
    <link rel="stylesheet" href="css/chosen.css"> 
    <style type="text/css" media="all"> 
     /* fix rtl for demo */ 
     .chosen-rtl .chosen-drop { left: -9000px; } 
    </style> 

    <script src="/js/jquery.validate.js"></script> 
    <script> 
     $.validator.setDefaults({ 
     submitHandler: function() { 
      alert("submitted!"); 
     } 
     }); 
     });</script> 




    <style> 
     div.dataTables_wrapper { 
      width: 1100px; 
      margin: 0 auto; 
     } 
    </style> 

    <style> 

     #leftContainer { 
      float:left; 
     } 

     #rightContainer { 
      float:none; 
     } 
    </style> 


</head> 

<body> 

    <div id="wrapper"> 

     <!-- Navigation --> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html">SB Admin</a> 
      </div> 
      <!-- Top Menu Items --> 
      <ul class="nav navbar-right top-nav"> 

       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <%=session.getAttribute("name")%> <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="LogOutController"><i class="fa fa-fw fa-power-off"></i> Log Out</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav side-nav"> 
        <li class="active"> 
         <a href="DashBoardController?action=listDairy"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
        </li>     
        <li> 
         <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a> 
        </li>      
        <li> 
         <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Home <i class="fa fa-fw fa-caret-down"></i></a> 
         <ul id="demo" class="collapse"> 
          <li> 
           <a href="DashBoardController?action=listDairy">Dashboard</a> 
          </li> 
          <li> 
           <a href="#">Administration</a> 
          </li> 
          <li> 
           <a href="UserController?action=listUser">Users</a> 
          </li> 

         </ul> 
        </li> 
        <li> 
         <a href="javascript:;" data-toggle="collapse" data-target="#demo1"><i class="fa fa-fw fa-arrows-v"></i> Operations <i class="fa fa-fw fa-caret-down"></i></a> 
         <ul id="demo1" class="collapse"> 
          <li> 
           <a href="AdvocateController?action=listAdvocate">Advocates</a> 
          </li> 
          <li> 
           <a href="ClientController?action=listClient">Clients</a> 

          </li> 
          <li> 
           <a href="CourtController?action=listCourt">Courts</a> 
          </li> 
          <li> 
           <a href="DashBoardController?action=listDairy">Registrar</a> 
          </li> 
          <li> 
           <a href="#">Case Category</a> 
          </li> 
          <li> 
           <a href="CaseStageController?action=listCaseStage">Case Stage</a> 
          </li> 
          <li> 
           <a href="DocumentController?action=listDocument">Documents</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="javascript:;" data-toggle="collapse" data-target="#demo2"><i class="fa fa-fw fa-arrows-v"></i> Case <i class="fa fa-fw fa-caret-down"></i></a> 
         <ul id="demo2" class="collapse"> 
          <li> 
           <a href="CaseMasterController?action=listCaseMaster">Case Updates</a> 
          </li> 
          <li> 
           <a href="CaseDetailController?action=listCaseDetail">Case Diary</a> 
          </li> 
          <li> 
           <a href="CaseDocumentController?action=listDocument">Case Documents</a> 
          </li> 
          <li> 
           <a href="#">Notice Information</a> 
          </li> 
          <li> 
           <a href="#">Allocate Cases</a> 
          </li> 
          <li> 
           <a href="#">Payments</a> 
          </li>        
         </ul> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </nav> 


     <div id="page-wrapper"> 

      <div class="container-fluid"> 

       <!-- Page Heading --> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h1 class="page-header"> 
          Case Registration 
         </h1> 
         <ol class="breadcrumb"> 
          <li> 
           <i class="fa fa-dashboard"></i> <a href="index.jsp">Dashboard</a> 
          </li> 
          <li class="active"> 
           <i class="fa fa-edit"></i> Case Registration 
          </li> 
         </ol> 
        </div> 
       </div> 
       <!-- /.row --> 

       <div class="row"> 
        <div class="col-lg-6"> 
         <form role="form" method="POST" class="register" action='CaseDetailController' name="frmAddCaseDetail"> 
          <div class="form-group"> 
           <p> 
            <select data-placeholder="Select Document Type..." name ="cad_FileName1" class="chosen-select" style="width:450px;" > 
             <c:forEach items="${casemasters}" var="casemaster">             
              <option value="${casemaster.cad_ID}" ${casedetail.cad_ID == casemaster.cad_ID ? 'selected' : ''}>${casemaster.cad_CaseNo} || ${casemaster.cad_FileName}</option> 
             </c:forEach> 
            </select> 
            <button type="submit" name="GetDetails" value="GetDetails" class="btn btn-primary">Get Details</button> 
            <button type="submit" name="AddCase" value="AddCase" class="btn btn-primary">Add Case</button> 

           </p> 
           <div class="row"> 
            <div class="col-lg-4"> 
             <div class="panel panel-success" style="width: 1000px;"> 
              <div class="panel-heading" style="width: 1000px;"> 
               <h3 class="panel-title" style="width: 1000px;"><i class="fa fa-money fa-fw"></i> Case History</h3> 
              </div> 

              <table class="table table-bordered table-hover table-striped" id="example" class="display" cellspacing="0" width="100%"> 
               <thead> 
                <tr> 

                 <th>Update</th> 
                 <th>Delete</th> 
                 <th>CaseID</th> 
                 <th>CaseDetailID</th>                                   
                 <th>Previous Date(s)</th>                
                 <th>Stage</th> 
                 <th>Judge</th>      
                 <th>Rojnama</th>                    
                 <th>Court</th>           

                </tr> 
               </thead> 

               <tbody> 
                <c:forEach items="${casedetails}" var="casedetail"> 
                 <tr> 

                  <td><a href="CaseDetailController?action=edit&CaseDetailID=<c:out value="${casedetail.ccd_ID}"/>">Edit</a></td> 
                  <td><a href="CaseDetailController?action=delete&CaseDetailID=<c:out value="${casedetail.ccd_ID}"/>">Delete</a></td> 
                  <td><c:out value="${casedetail.cad_ID}" /></td> 
                  <td><c:out value="${casedetail.ccd_ID}" /></td> 

                  <td><fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" /></td>            
                  <td><c:out value="${casedetail.ccd_Stage}" /></td> 
                  <td><c:out value="${casedetail.ccd_Judge}" /></td> 
                  <td><c:out value="${casedetail.ccd_Rojnama}" /></td>                 
                  <td><c:out value="${casedetail.ccd_Court}" /></td>                 
                 </tr> 
                </c:forEach> 
               </tbody> 
              </table> 
             </div>           
            </div> 
           </div> 

           <p> 
            <input type="text" readonly="readonly" class="form-control" placeholder="Case ID" name="cad_id" value="<c:out value="${casedetail.cad_ID}" />" /> 
           </p> 
           <p> 
            <input type="text" readonly="readonly" class="form-control" placeholder="Registration No" name="cad_RegNo" value="<c:out value="${casedetail.cad_RegNo}" />" /> 
           </p> 
           <p>         
           <p> 
            <input type="text" readonly="readonly" class="form-control" placeholder="Case Number" name="cad_CaseNo" value="<c:out value="${casedetail.cad_CaseNo}" />" /> 
           </p> 
           <p> 
            <input type="text" readonly="readonly" class="form-control" placeholder="File Number" name="cad_FileNo" value="<c:out value="${casedetail.cad_FileNo}" />" /> 
           </p> 
           <p> 
            <input type="text" readonly="readonly" class="form-control" placeholder="File Name" name="cad_FileName" value="<c:out value="${casedetail.cad_FileName}" />" />            
           </p> 
           <p> 
            <input type="hidden" readonly="readonly" class="form-control" placeholder="Previous Date" name="ccd_PreviousDate" value="<fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" />" /> 
           </p> 
           <p> 
            <input type="text" class="form-control" placeholder= "<fmt:formatDate value="${casedetail.ccd_CurrentDate}" pattern="dd/MM/yyyy" />" name="ccd_CurrentDate" /> 
           </p>          
           <p> 
            <input type="text" class="form-control" placeholder="Stage" name="ccd_Stage" value="<c:out value="${casedetail.ccd_Stage}" />" />            
           </p>  
           <p>           
            <input type="text" class="form-control" placeholder="Judge" name="ccd_Judge" value="<c:out value="${casedetail.ccd_Judge}" />" /> 
           </p> 
           <p> 
            <input type="text" class="form-control" placeholder="Rojnama" name="ccd_Rojnama" value="<c:out value="${casedetail.ccd_Rojnama}" />" /> 
           </p> 
           <p> 
            <input type="text" class="form-control" placeholder="Judgment" name="ccd_Judgment" value="<c:out value="${casedetail.ccd_Judgment}" />" />            
           </p> 
           <p> 
            <input type="text" class="form-control" placeholder="Remarks" name="ccd_Remarks" value="<c:out value="${casedetail.ccd_Remarks}" />" /> 
           </p> 
           <p> 
            <input type="text" class="form-control" placeholder="Court" name="ccd_Court" value="<c:out value="${casedetail.ccd_Court}" />" /> 
           </p> 



           <input type="hidden" class="form-control" name="ccd_DeleteFlag" value="<c:out value="${casedetail.ccd_DeleteFlag}" />" /> 
           <input type="hidden" class="form-control" name="ccd_ActiveFlag" value="<c:out value="true" />" /> 
           <input type="hidden" class="form-control" name="ccd_CreateDate" value="<fmt:formatDate pattern="dd/MM/yyyy" value="<%= new java.util.Date()%>" />" />     
           <input type="hidden" class="form-control" name="ccd_CreateUser" value="<c:out value="1" />" />     
           <input type="hidden" class="form-control" name="ccd_ModifyDate" value="<fmt:formatDate pattern="dd/MM/yyyy" value="<%= new java.util.Date()%>" />" />     
           <input type="hidden" class="form-control" name="ccd_ModifyUser" value="<c:out value="1" />" /> 

           <p> 
            <button type="submit" name="SaveDetails" value="SaveDetails" class="btn btn-primary" onclick="ValidateEndDate();">Submit</button> 
            <button type="reset" class="btn btn-default">Reset Button</button> 
           </p> 
          </div> 

           <script> 

            function ValidateEndDate() { 
             var StartDate= document.getElementById('ccd_PreviousDate').value; 
             var EndDate= document.getElementById('ccd_CurrentDate').value; 
             var eDate = new Date(EndDate); 
             var sDate = new Date(StartDate); 
             if(StartDate!= '' && StartDate!= '' && sDate> eDate) 
             { 
               alert("Please ensure that the Next Date is greater than Previous Date"); 
               return false; 
             } 
            } 
           </script> 
         </form> 

        </div> 




       </div> 
       <!-- /.row --> 

      </div> 
      <!-- /.container-fluid --> 

     </div> 
     <!-- /#page-wrapper --> 

     <!-- /#wrapper --> 

     <!-- jQuery --> 
     <script src="js/jquery.js"></script> 

     <!-- Bootstrap Core JavaScript --> 
     <script src="js/bootstrap.min.js"></script> 
     <!-- Bootstrap Core JavaScript --> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
     <script src="js/chosen.jquery.js" type="text/javascript"></script> 
     <script src="js/prism.js" type="text/javascript" charset="utf-8"></script> 
     <script type="text/javascript"> 
     var config = { 
      '.chosen-select': {}, 
      '.chosen-select-deselect': {allow_single_deselect: true}, 
      '.chosen-select-no-single': {disable_search_threshold: 10}, 
      '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'}, 
      '.chosen-select-width': {width: "95%"} 
     } 
     for (var selector in config) { 
      $(selector).chosen(config[selector]); 
     } 
     </script> 
</body> 

+0

作業フィーリングを提供すると、コードをデバッグして問題を見つけるのがより簡単になります。 –

答えて

0

この比較は、日付が入力されるフォーマットに依存します。標準フォーマット(YYYY-MM-DD)と仮定すると、あなたはこのような操作を行うことができます。

function ValidateEndDate() { 
 
    var StartDate = document.getElementById('ccd_PreviousDate').value; 
 
    var EndDate = document.getElementById('ccd_CurrentDate').value; 
 
    var eDate = new Date(EndDate); 
 
    var sDate = new Date(StartDate); 
 
    if (StartDate != '' && StartDate != '' && sDate.getTime() > eDate.getTime()) { 
 
    alert("Please ensure that the Next Date is greater than Previous Date"); 
 
    return false; 
 
    } 
 
}

.getTime()を使用してタイムスタンプを取得し、その比較。

+0

'.getTime() 'を使わないでJS日付を比較するとうまくいくので、ここで問題はありません。 –

+0

@MuhammadAref yea私はそれを知っています、問題はenetered日付の形式にあります。 – void

+0

日付はdd/MM/yyyy形式で入力します。 – NVJ

0
var startDate = new Date($('#startDate').val()); 
var endDate = new Date($('#endDate').val()); 

if (startDate < endDate){ 
    alert("Please ensure that the Next Date is greater than Previous Date"); 
} 
+0

dd/mm/yyyy形式を使用しています... – NVJ

+0

このコードスニペットでは、[説明を含む](http://meta.stackexchange。 com/questions/114762/explain-entire-code-based-answers)は本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 - [レビューから](https://stackoverflow.com/review/low-quality-posts/11913877) – Ferrybig

+0

皆さん、こんにちは、この機能は現在動作しています。私はテキストボックス定義でidを使用していませんでした。すべての助けをありがとうございました。 – NVJ

1

私は、これは、それは私はあなたがEndDateを比較していない理由はわからない

function ValidateEndDate() { 

      var d = new Date(); 
      var EndDate= d; 
      d.setTime(d.getTime() + 86400000); 

      var StartDate= new Date(); 
      var sDate = new Date(StartDate); 
      var eDate = new Date(EndDate); 


      console.log("Start Date : " + StartDate);    
      console.log("End Date : " + d); 

       if(StartDate!= '' && EndDate!= '' && sDate> eDate) 
        { 
        console.log("Please ensure that the end Date is greater than Previous Date"); 
        return false; 
        } 

        if(StartDate!= '' && EndDate!= '' && sDate < eDate) 
        { 
        console.log("Please ensure that the Start Date is greater than Previous Date"); 
        return false; 
        } 
    } 
    ValidateEndDate(); 

をどのように見えるかで、あなたのコードをコピーして少し変わったが、私のノードのコマンドプロンプトでそれを実行するために、それは働いていました。私もそれを修正しました。それが役に立てば幸い。

関連する問題