Question

我有一个jquery日期选择器的代码，我也有代码来验证它。但是，如果您在框中单击，则会出现日历，这很好，但是如果您单击并且不选择日期，它仍会标记为绿色（已验证）。

<script>
  // Validate Week Ending Date
  function validateSelect(element_94_datepick){
    if(document.getElementById('element_94_datepick').selectedIndex !== 0){
      document.getElementById('element_94_datepick').style.background ='#ccffcc';
      document.getElementById('datepickError').style.display = "none";
      return true;
    }else{
      document.getElementById('element_94_datepick').style.background ='#e35152';
      document.getElementById('datepickError').style.display = "block";
      return false;
    }
  }

</script>

<script>
  function validateForm(){
    // Set error catcher
    var error = 0;

    if(!validateSelect('element_94_datepick')){
      document.getElementById('datepickError').style.display = "block";
      document.getElementById('element_94_datepick').focus();
      error++;
    }

    // Don't submit form if there are errors
    if(error > 0){
      return false;
    }
  }

    </script>

  <script>
    $(function() {
      $( "#element_94_datepick" ).datepicker({
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
          var day = date.getDay();
          return [(day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6)];
        }
      });
    });
  </script>

我的输入如下所示：

<td>
  <input type="text" class="formfield" id="element_94_datepick" name="element_94_datepick" value="" onblur="validateSelect(element_94_datepick)"/>
  <span id="datepickError" style="display: none;">You must select a Week Ending Date</span>
</td>

提前致谢

Answer 1

你有jquery所以我删除了一些getElementById调用并使用了jquery，但这是一个开始。

<td>
    <input type="text" class="formfield" id="element_94_datepick" name="element_94_datepick" value="" onblur="validateSelect('element_94_datepick')" /> <span id="datepickError" style="display: none;">You must select a Week Ending Date</span>

</td>

javascript

 // Validate Week Ending Date
  function validateSelect(element_94_datepick) {
      var field = $("#" + element_94_datepick)
      if (field.val() !== "") {
          field.css('background-color', '#ccffcc');
          document.getElementById('datepickError').style.display = "none";
          return true;
      } else {
          field.css('background-color', '#e35152');
          document.getElementById('datepickError').style.display = "block";
          return false;
      }
  }

  function validateForm() {
      // Set error catcher
      var error = 0;

      if (!validateSelect('element_94_datepick')) {
          document.getElementById('datepickError').style.display = "block";
          document.getElementById('element_94_datepick').focus();
          error++;
      }

      // Don't submit form if there are errors
      if (error > 0) {
          return false;
      }
  }

  $(function () {
      $("#element_94_datepick").datepicker({
          dateFormat: 'yy-mm-dd',
          beforeShowDay: function (date) {
              var day = date.getDay();
              return [(day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6)];
          },
          onSelect: function() { validateSelect('element_94_datepick'); }
      });
  });

工作示例：http://jsfiddle.net/cJy9z/1/

jquery datepicker验证无法正常工作

1 个答案: