Javascript下拉菜單並驗證日歷選擇器

Question

好的，我有一個下拉菜單，該菜單由.jsp動態生成，並填充有從數據庫中獲取的數據。 2下拉列表和2 datepicker我遇到的問題是JS驗證，JavaScript不太好，但是出於我的迷你項目的目的，我還是必須使用它。

問題是使用JS，我正在檢查用戶是否選擇了兩個下拉字段和兩個日期選擇器，以便可以提交表單，並且搜索列表應顯示在按鈕下方，否則顯示警告消息，指示該下拉列表-下拉菜單和日期選擇器尚未填寫。

我應該在哪里驗證這4個字段？ 如何使用“ EXECUTE”從“ SelectOperation.java”中調用類（如附件所示）。

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.hibernate.Session;

import entityBeans.AccessLevel;
import entityBeans.Business;
import entityBeans.CustomerBranch;
import entityBeans.Menu;
import entityBeans.TransactionLog;
import entityBeans.User;
import cmnUtilities.CmnConstants;

public class SelectOperation { 
    Session session =  ConnectionMySQL.getInstance().getConnection();
    private static SelectOperation selectData = new SelectOperation();

    private SelectOperation()
    {
    }
    public User Select_login_User(String user_id)
    {

        User loginUser = null;
         try
         {
          loginUser = (User)session.get(User.class,user_id.trim());
         }
         catch(Exception exception)
         {
             exception.printStackTrace();   
         }
        return loginUser; 
    }
    public User Chech_User_existence(String user_id)
    {

        User CheckUser = null;
         try
         {
             CheckUser = (User)session.get(User.class,user_id.trim());
         }
         catch(Exception exception)
         {
             exception.printStackTrace();   
         }
        return CheckUser; 
    }
    public List<List<Menu>> Select_User_Menu(int Access_id)
    {

        List<Menu> UserMenu = null;
       List<List<Menu>>  Menus = new ArrayList<List<Menu>>();
        AccessLevel acl = null ;
         try
         {
             if(session.isOpen())
             {
            // acl =     (AccessLevel)session.get(AccessLevel.class,Access_id.trim());
            // StringBuffer AccessLevel = formatedMenuIds(acl.getMenuId());
            // System.out.println(AccessLevel);

             //UserMenu = (List<Menu>)session.createQuery("from Menu where menuId in ("+menuIds+")").list();
             UserMenu = (List<Menu>)session.createQuery("from Menu where menuAccLevel >='"+Access_id+"'").list();

             List<Menu> MainModule = new ArrayList<Menu>();
             List<Menu> SubModule = new ArrayList<Menu>();

             for(Menu seperateMenu : UserMenu)
             {
                 if((seperateMenu.getMenuId().length()) == CmnConstants.MAIN_MENU)
                 {
                     MainModule.add(seperateMenu); 
                 }
                 if((seperateMenu.getMenuId().length()) == CmnConstants.SUB_MENU)
                 {
                     SubModule.add(seperateMenu); 
                 }
             }

             for(Menu disp1 : MainModule)
             {
             List<Menu>  finaly = new ArrayList<Menu>();
             finaly.add(disp1);
             for(Menu disp2 : SubModule)
             {
             if(disp2.getMenuId().startsWith(disp1.getMenuId()))
             {
                 finaly.add(disp2);
             }
             }
             Menus.add(finaly);
             }
            System.out.println(Menus);
             }
             else
             {
                 System.out.println("session closed"); 
             }
         }
         catch(Exception exception)
         {
             exception.printStackTrace();   
         }
        return Menus; 
    }
    //METHOD RETURNS ALL ACCESS LEVEL CODE AND IT'S DESCRIPTION
    public List<AccessLevel> getAllAccessLevel()
    {
        List<AccessLevel> accessList = null;
        try
        {
        accessList = (List<AccessLevel>)session.createQuery("from AccessLevel").list();
        System.out.println(accessList);
        }
        catch(Exception exception)
        {
            exception.printStackTrace();    
        }
        return accessList;
    }
    //METHOD TO SELECT ALL BRANCH IDS
    public  List<CustomerBranch> getAllCustomerBranch()
    {
        List<CustomerBranch> branchList = null;
        try
        {
        branchList = (List<CustomerBranch>)session.createQuery("from CustomerBranch").list();
        System.out.println(branchList);
        }
        catch(Exception exception)
        {
            exception.printStackTrace();    
        }
        return branchList;
    }
    //METHOD TO SELECT ALL TRANSACTION_LOG DETAILS
    public  List<TransactionLog> getAllTransactionLog()
       {
        List<TransactionLog> TxnList = null;
            try
            {
                TxnList = (List<TransactionLog>)session.createQuery("from TransactionLog").list();
            System.out.println(TxnList);
            }
            catch(Exception exception)
            {
                exception.printStackTrace();    
            }
            return TxnList;
        }

    //METHOD TO SELECT ALL BUSINESS
        public  List<Business> getAllBusiness()
           {
            List<Business> BusinessList = null;
                try
                {
                    BusinessList = (List<Business>)session.createQuery("from Business").list();
                System.out.println(BusinessList);
                }
                catch(Exception exception)
                {
                    exception.printStackTrace();    
                }
                return BusinessList;
            }

        public Business SelectBusiness_Id(String business_id)
        {

            Business CheckBusiness_id = null;
             try
             {
                 CheckBusiness_id = (Business)session.get(Business.class,business_id.trim());
             }
             catch(Exception exception)
             {
                 exception.printStackTrace();   
             }
            return CheckBusiness_id; 
        }

        public CustomerBranch SelectBranch_Id(String branch_id)
        {
            CustomerBranch CheckBranch_id = null;
                 try
                 {
                     CheckBranch_id = (CustomerBranch)session.get(CustomerBranch.class,branch_id.trim());
                 }
                 catch(Exception exception)
                 {
                     exception.printStackTrace();   
                 }
                return CheckBranch_id; 
            }



        public TransactionLog FromDateSel(String txn_date)
        {

            TransactionLog transDateFrom = null;
             try
             {
                 transDateFrom = (TransactionLog)session.get(TransactionLog.class,txn_date.trim());
             }
             catch(Exception exception)
             {
                 exception.printStackTrace();   
             }
            return transDateFrom; 
        }
        public TransactionLog ToDateSel(String txn_date)
        {

            TransactionLog transDateTo = null;
             try
             {
                 transDateTo = (TransactionLog)session.get(TransactionLog.class,txn_date.trim());
             }
             catch(Exception exception)
             {
                 exception.printStackTrace();   
             }

            return transDateTo; 
        }


    // Will returns all menu ids
    /*public StringBuffer formatedMenuIds(String text)
    {
         String[] val = text.split(",");
         StringBuffer sb = new StringBuffer();
         for(String cc :val)
         {
             sb.append("'"+cc+"'"+",");
         }
         if(sb.toString().endsWith(","))
         {
             sb.delete(sb.length()-1, sb.length());  
         }  
         return sb;
    }*/

    public static SelectOperation getInstance()
    {
        return selectData;
    }


}

我想我只需要更多的javascript來做到這一點，我只是不知道如何。 感謝您的幫助。

 <% @page import = "allDatabaseOperations.SelectOperation" %> <% @page import = "java.util.List" %> <% @page import = "entityBeans.TransactionLog" %> <% @page import = "entityBeans.Business" %> <% @page import = "entityBeans.CustomerBranch" %> <% @page language = "java" contentType = "text/html; charset=ISO-8859-1" pageEncoding = "ISO-8859-1" %> < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < link rel = "stylesheet" href = "../styles/style.css" type = "text/css" / > <% List < TransactionLog > Allbranches = SelectOperation.getInstance().getAllTransactionLog(); List < Business > Businesslevel = SelectOperation.getInstance().getAllBusiness(); List < CustomerBranch > CustBranch = SelectOperation.getInstance().getAllCustomerBranch(); %> < link rel = "stylesheet" href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" > < script src = "//code.jquery.com/jquery-1.10.2.js" > < /script> <script src="/ / code.jquery.com / ui / 1.11.4 / jquery - ui.js "></script> <link rel=" stylesheet " href=" / WebContent / styles / style.css "> <script> $(function() { $( "# fromdate " ).datepicker({ showOn: " button ", buttonImage: ".. / .. / images / calendar.png ", buttonImageOnly: true, buttonText: " Select date " }); }); $(function() { $( "# todate " ).datepicker({ showOn: " button ", buttonImage: ".. / .. / images / calendar.png ", buttonImageOnly: true, buttonText: " Select date " }); }); </script> </head> <body> <form> <table align=" center " style=" background - color: #F5D0A9; padding: 70px; border - top: 1px; "> <tr> <%-- added by Maihani on 181115(Wed) --%> <td> Business Id :- </td> <%--<td> <input type=" text " name=" BusinessId " size = " 46 "/> --%> <td> <select name=" Business "> <%for(Business business : Businesslevel) {%> <option value=" <%= business.getBusinessId() %> "><%=business.getBusinessName()%></option> <%} %> </select><%-- </td>--%> </td> </tr> <td> Branch Id : </td> <td> <select name=" CustomerBranch "> <%for(CustomerBranch custBranch : CustBranch) {%> <option value=" <%= custBranch.getBranchId() %> "><%=custBranch.getBranchName()%></option> <%} %> </select> </td> </tr> <tr> <td> From Date : </td> <td> <%-- <input type=" text " name=" BrachId " size = " 46 "/> --%> <input type=" text " id=" fromdate "> </td> </tr> <tr> <td> To Date : </td> <td> <%--<input type=" text " name=" BrachId " size = " 46 "/> --%> <input type=" text " id=" todate "> </td> </tr> <tr> <td> </td> <td align=" center "><input type=" submit " value=" Search Transaction "/></td> </tr> <tr > <td colspan=" 2 "> <table align=" center "> <tr bgcolor=" #333333"> <td><font color= "#FFFFFF" > User ID < /font></td > < td > < font color = "#FFFFFF" > Branch ID < /font></td > < td > < font color = "#FFFFFF" > Transaction Code < /font></td > < td > < font color = "#FFFFFF" > Transaction Date < /font></td > < td > < font color = "#FFFFFF" > Transaction Time < /font></td > < /tr> <%for(TransactionLog txn : Allbranches){%> <tr bgcolor="#F2F2F2"> <td><%=txn.getUserId()%></td > < td > <%= txn.getBranchId() %> < /td> <td><%=txn.getTxnCode() %></td > < td > <%= txn.getTxnDate() %> < /td> <td><%=txn.getTxnTime() %></td > < /tr> <%} %> </table > < /td> <td></td > < /tr> </table > < /form> </body > < /html> 

Answer 1

在提交按鈕上，您可以調用一個JavaScript函數，該函數依次驗證4種輸入類型的值，並根據驗證結果繼續提交表單或顯示錯誤消息。

<input type="submit" onclick="validateForm()" value="Search Transaction" />

<script>
    function validateForm(){
        var ip1 = $("#firstdropdownId").val();
        var ip2 = $("#otherdropdownId").val();
        var date1 = $("#firstdateId").val();
        var date2 = $("#otherdateId").val();

        if(ip1 == null || ip1.length.trim() == 0 || ip2 == null || ip2.length.trim() == 0 || idt1 == null || dt1.length.trim() == 0 || dt2 == null || dt2.length.trim() == 0){
            $("#errorMessageDiv").show();
            return false;
        }
        else{
            $("#errorMessageDiv").hide();
            return true;
        }
    }
</script>

或者，如果您想從Java端進行驗證，則可以通過傳遞參數作為輸入值來進行Ajax調用，這將返回表單的驗證狀態。