jQuery datepicker验证无法正常工作

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/