文章/答案/技术大牛

发布

社区首页 >问答首页 >在jsp页面中的下拉和日期选择器上应用所需的字段验证

问在jsp页面中的下拉和日期选择器上应用所需的字段验证
EN

Stack Overflow用户

提问于 2015-03-26 09:12:05

回答 2查看 2.9K关注 0票数 1

我有一个jsp页面，我希望用户不能提交表单，除非他没有从下拉列表中选择一个值，也没有从jsp的calendar.My代码中选择任何日期-

<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>

用户必须从任何下拉列表中选择任何一个值，并且必须从calender.How中选择日期和时间，以使这些字段对用户是强制性的。

输出是-

编辑-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>

jquery

validation

jsp

javascript

回答 2

Stack Overflow用户

发布于 2015-03-26 09:20:54

您可以通过JQuery简单地完成它

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

如果你对解决方案有不同的想法，请告诉我。

票数 0

Stack Overflow用户

发布于 2015-03-30 09:59:47

我已经在小提琴上解决了您的问题，并找到了下面的相应代码，

在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();
   });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29274618

复制

相似问题

问在jsp页面中的下拉和日期选择器上应用所需的字段验证
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jsp页面中的下拉和日期选择器上应用所需的字段验证EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jsp页面中的下拉和日期选择器上应用所需的字段验证
EN