阻止包含无效日期的2个字段的提交表单

时间:2012-02-02 14:07:46

标签: jquery forms date submit mask

我需要一些帮助来解决我的问题。我有2个输入字段,带有掩码(http://digitalbush.com/projects/masked-input-plugin/),就像那样> 12/2010(mm / yyyy)。

我希望该用户可以在日期有效时注册表单或留空,并在日期无效时在div中发送提醒。

如果我有1个字段,它工作正常,但是当我有2个字段时,如果用户在第二个字段中输入有效日期,他可以注册表单。

否则,如果您有任何想法限制可以在开始日期之前的结束日期......

感谢您的帮助;)

我的HTML代码:

<form id="blockdate">
<div>date start: <input class="date" type="text"></div>
<div>date end: <input class="date2" type="text"></div>
<div><input class="submit" type="submit"></div>
<div id="msg"></div>
</form>

我的JS代码:

        function verifyDate(datevalue) {

      var done = false;

      if(datevalue != null || datevalue != ''){
        var tmp = datevalue.split('/');
        var month = tmp[0];
        var year = tmp[1];

       if(month >= 1 && month <= 12){
       if(year >= 1990 && year <= 2099){
           clean();
           done = true;
          }
          else {
            $('#msg').html('Year invalid 1900 - 2099.');
          }
       } else {
          $('#msg').html('Month invalid');
       }     
    } if (datevalue < 1 ) {
        done = true;
    }

    return done;
  }
function verifyDate2(datevalue2) {

      var done = false;

      if(datevalue2 != null || datevalue2 != ''){
        var tmp = datevalue2.split('/');
        var month = tmp[0];
        var year = tmp[1];

       if(month >= 1 && month <= 12){
       if(year >= 1990 && year <= 2099){
           clean();
           done = true;
          }
          else {
            $('#msg').html('Year invalid 1900 - 2099.');
          }
       } else {
          $('#msg').html('Month invalid');
       }     
    } if (datevalue2 < 1 ) {
        done = true;
    }

    return done;
  }



  function clean() {
     $('#msg').html('');
  }

    jQuery(function($) {
     $(".date").mask("99/9999");   

       $('.blockdate').submit(function() {
          var datevalue = $('.date').val();
          var datevalue2 = $('.date2').val();
          return verifyDate(datevalue);
       });

       $(".date").change(function(){
        var datevalue = $(this).val();
          if(datevalue.length == 7) {
            verifyDate(datevalue);
          } else {
            clean();
          }
      });


    jQuery(function($) {
     $(".date2").mask("99/9999");   

       $('.blockdate').submit(function() {
          var datevalue2 = $('.date2').val();
          return verifyDate2(datevalue2);
       });

       $(".date2").change(function(){
        var datevalue2 = $(this).val();
          if(datevalue2.length == 7) {
            verifyDate2(datevalue2);
          } else {
            clean();
          }
      });

    });

    });

2 个答案:

答案 0 :(得分:1)

我可以通过提供一个小的正则表达式来略微简化您的任务。

`^([0]?\d|1[0-2])/(199\d|20\d{2})$`

以这种方式使用

function TestDate(input) {
    var pattern = /^([0]?\d|1[0-2])\/(199\d|20\d{2})$/;
    return pattern.test(input);
}

它检查第一部分的天气,即1到12之间的天气,以及1990年到2099年之间的第二部分。

修改

在测试格式的正确性后,您可以看到如下范围

function RangeOk (lowerDate, upperDate) {
    return GetNumeric(lowerDate) < GetNumeric(upperDate);
}

function GetNumeric(input) {
    var parts = input.split("/");
    var yearNum = parseInt(parts[1]) * 12;
    // Get rid of leading 0 if exists
    // It can be there as the pattern above allows it.
    yearNum += parseInt(parts[0].replace(/0(\d)/, "$1"));
    return yearNum;
}

有一个小数学技巧。

答案 1 :(得分:1)

  1. 您可以从禁用提交按钮开始,直到所有表单字段都有效,然后启用它$("submit").prop("disabled",true);

  2. $(input).blur()上检查两个输入值是否有效。

  3. 获取两个年份值并进行比较:startdate <= enddate

  4. 启用发送按钮

  5. 增强:

    if(datevalue2 != null || datevalue2 != '') =&gt; ||应该是&& =&gt;可以写成:if(!datevalue2)

    var datevalue2 = $('.date2').val();
              return verifyDate2(datevalue2);
    

    =&GT; return verifyDate2($('.date2').val())

    修改

    你只需要一个验证功能,它们是相同的。

    尝试此操作以防止错误输入上的formubmit:

      if(year >= 1990 && year <= 2099){
           clean();
           done = true;
            $(".submit").prop("disabled",false);
          }
    
       else {
            $('#msg').html('Year invalid 1900 - 2099.');
            $(".submit").prop("disabled",true);
          }
       } else {
          $('#msg').html('Month invalid');
          $(".submit").prop("disabled",true);
       }