在jsp页面中的下拉列表和日期选择器上应用必需的字段验证

时间：2015-03-26 09:12:05

标签： javascript jquery validation jsp

我有一个jsp页面，我希望用户无法提交表单，直到他没有从下拉列表中选择一个值并且没有从calendar中选择任何日期。我的代码为jsp是 - 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">




<script language="javascript" type="text/javascript" src="datetimepicker.js">
 </script>

<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).getTime() < new Date(d1).getTime()) 
{ 
    alert("Endate date should be greater than start date"); // handle your error validation here 
    return false; 
    }
    else
        {return true}; 
    } 
</script>



<script type="text/javascript">
$(document).ready(function(){
    $('input[name="val"]').click(function() {
       if($('input[name="val"]').is(':checked')) { 
           var radioValue = $("input[name='val']:checked").val();
            if(radioValue == "Filling"){
               $( "#Fil" ).prop( "disabled", false );
               $( "#store" ).prop( "disabled", true );
            } else {
                $( "#Fil" ).prop( "disabled", true );
               $( "#store" ).prop( "disabled", false );
            }
       }
    });
    });
</script>
</head>

</head>

<body>
<jsp:useBean id="obj"  class="ref_Database.Refernce_Database" />


<form  method="post" action="All_Mps.jsp">
<b>Select Status</b>
<p><input type="radio" name="val" value="Filling" id="Filling"> Filling</p>
<p><input type="radio" name="val" value="Stored" id="stored"> Stored</p>


Select Reference for filling:<br>
<select name="ref_fill" id="Fil" disabled="disabled"  >
<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>
Select Reference for storage:<br>

<select name="ref_stored" id="store" disabled="disabled" >
<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>


<br />





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

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

</form>

</body>
</html>

用户必须从任何下拉列表中选择任何一个值，并且必须从日历中选择日期和时间。如何为用户强制使用这些字段。

输出 -

enter image description here

EDIT -3- 我尝试了以下方式 - 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="css/screen.css">
    <script src="../dist/jquery.validate.js"></script>




<script type="text/javascript" src="datetimepicker.js">

//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com 

</script>


<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).getTime() < new Date(d1).getTime()) 
{ 
    alert("Endate date should be greater than start date"); // handle your error validation here 
    return false; 
    }
    else
        {return true}; 
    } 

</script>






<script>
$(document).ready(function () {
       $("#form").validate({
          rules: {
              startdate: {
             required: true
          },
         dp: {
            required: true
          }
       },
       enddate:{
             required: true
          },
       messages: {
           startdate: {
           required: "date is required"
        },
       dp: {
        required: "select one option"
       }
      },
      enddate:{   required: "date is required"
        },
      ignore: "",
      errorClass: 'fieldError',
      onkeyup: false,
      onblur: false,
      errorElement: 'label',
      submitHandler: function () {
          alert("alert");
      }
     });

       $(document).on("click", "#submit", function () {
           $("#form").valid();
       });
    });
</script>


</head>

<body>


<form  method="post" id="form" action="All_Mps.jsp">
Select Reference:

<select name="ref_logtime" id="dp" >
<option value="">Select</option>

<option value="[2014-10-10 07:17:00.0, 2014-10-10 08:46:00.0]">Ref_Filling-1 [2014-10-10 07:17:00.0, 2014-10-10 08:46:00.0]</option>

<option value="[2014-10-10 08:50:00.0, 2014-10-10 12:50:00.0]">Ref_Storage_1 [2014-10-10 08:50:00.0, 2014-10-10 12:50:00.0]</option>

<option value="[2014-09-08 10:00:00.0, 2014-09-08 11:00:00.0]">Reference-3 [2014-09-08 10:00:00.0, 2014-09-08 11:00:00.0]</option>

<option value="[2014-10-10 08:50:00.0, 2014-10-10 23:50:00.0]">Ref_Storage_2 [2014-10-10 08:50:00.0, 2014-10-10 23:50:00.0]</option>

<option value="[2014-09-01 10:00:00.0, 2014-09-01 11:00:00.0]">Ref_Filling-2 [2014-09-01 10:00:00.0, 2014-09-01 11:00:00.0]</option>

</select>

<br><br>
<b>Select Date to be compared</b><br>

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

<input class="submit" type="submit" onclick="return date_comapare();" value="Submit" /><br>

</form>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

你可以简单地通过JQuery

来完成 
$("input[type=submit]").click(function () {
                if ($("#startdate").val() == "" || $("#enddate").val() == "" || $("#Fil option:selected").val() == "" || $("#store option:selected").val() == "")
                {
                    return false;
                }
            })

如果您对解决方案有所不同，请告诉我。

答案 1 :(得分：0)

我已在FIDDLE处理了您的问题，并在下面找到相应的代码，

在HTML中，

<form id="form">
<input type="text" value="" name="input" id="input" /> <br>
 <select name="dp" id="dp">
     <option value="">Select any option</option>
     <option value="1">option1</option>
     <option value="2">option2</option>
     <option value="3">option3</option>
  </select><br>

 <input id="submit" type="submit" value="Submit" />
</form>

在脚本编写部分，

$(document).ready(function () {
   $("#form").validate({
      rules: {
          startdate: {
              required: true
           },
          dp: {
              required: true
          },
          enddate:{
              required: true
          }
       },
       messages: {
          startdate: {
             required: "date is required"
          },
          dp: {
             required: "select one option"
          }
          enddate:{   
             required: "date is required"
          }
    },
  ignore: "",
  errorClass: 'fieldError',
  onkeyup: false,
  onblur: false,
  errorElement: 'label',
  submitHandler: function () {
      alert("alert");
  }
 });
   $(document).on("click", "#submit", function () {
       $("#form").valid();
   });
});
相关问题
最新问题