2015-05-29 43 views
1

我在[month],[day]和[year]的3个单独字段接受birth-date作为输入的表单上使用了“jQuery Validate”插件。如果他/她的年龄小于21岁,我需要将用户重定向到另一个网址。我已经通过互联网寻找了可能的解决方案,并提出了使用插件的'submitHandler'方法处理场景的决定。jQuery验证插件:如果任何特定条件无效,重定向用户

添加submitHandler方法以及我的自定义方法后的新问题是,它已停止验证其他日期范围。虽然它完美地将用户重定向时年龄计算为小于21

我的代码如下:

$.validator.addMethod("ageGateValidBirthdate", function (value, element) { 
    var month = parseInt($('.age-gate-month').val(), 10); 
    var day = parseInt($('.age-gate-day').val(), 10); 
    var year = parseInt($('.age-gate-year').val(), 10); 
    var userdate = new Date(year, month - 1, day); 
    var CurrentDate = new Date(); 
    var flag = null; 
    var validDate = false; 
    var userDateInSeconds = userdate.getTime(); 
    var currentDateCompareVar = new Date(); 
    currentDateCompareVar.setTime(userDateInSeconds); 
    if (CurrentDate > userdate && currentDateCompareVar.getFullYear() === year && currentDateCompareVar.getMonth() + 1 === month && currentDateCompareVar.getDate() === day) { 
     validDate = true; 
    } 
    if (validDate && year > 1900) { 
     flag = true; 
     $('.age-gate-month, .age-gate-day, .age-gate-year').removeClass('error'); 
    } 
    else { 
     flag = false; 
    } 
    return flag; 

}, "Enter correct birthdate"); 

$ageGatePage.on('submit', function (e) { 
    e.preventDefault(); 
    jQuery.validator.addClassRules({ 
     "age-gate-month": { 
      required: true, 
      number: true, 
      minlength: 1, 
      maxlength: 2, 
      range: [1, 12], 
      ageGateValidBirthdate: true 
     }, 
     "age-gate-day": { 
      required: true, 
      number: true, 
      minlength: 1, 
      maxlength: 2, 
      range: [1, 31], 
      ageGateValidBirthdate: true 
     }, 
     "age-gate-year": { 
      required: true, 
      number: true, 
      minlength: 4, 
      maxlength: 4 
     } 
    }); 
    $ageGatePage.valid(); 
}); 

$ageGatePage.validate({ 
    groups: { 
     dob: "month_of_birth day_of_birth year_of_birth" 
    }, 
    messages: { 
     //messages here 
    }, 
    errorPlacement: function (error, element) { 
     error.appendTo(element.parents(".age-gate-birth-date")); 
    }, 
    submitHandler: function (form) { 
     var month = parseInt($('.age-gate-month').val(), 10); // Convert to numbers with "+" prefix 
     var day = parseInt($('.age-gate-day').val(), 10); 
     var year = parseInt($('.age-gate-year').val(), 10); 
     if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= (new Date(year, month, 0)))) 
      return false; 
     var userdate = new Date(year, month - 1, day); // Use the proper constructor 
     var CurrentDate = new Date(); 
     var flag = null; 
     var age = Math.floor((CurrentDate - userdate)/(365.25 * 24 * 60 * 60 * 1000)); 
     var ageGateFlag = age >= 21 ? true : false; 
     if (ageGateFlag) { 
      flag = true; 
      form.submit(); 
     } 
     else { 
      flag = false; 
      window.location.href = "http://domain.com/"; 
      return flag; 
     } 
     return flag; 
    } 
}); 
+0

'submitHandler'仅在“有效”表单上触发,因此不是评估数据和处理错误的正确位置。 'submitHandler'仅用于验证后提交数据*。 'invalidHandler'以“无效”形式触发,并且会更好。 – Sparky

+0

如果您认真寻求帮助,那么您还需要向我们展示相关的HTML标记,并创建一个问题的[MCVE演示](http://stackoverflow.com/help/mcve)。 – Sparky

回答

0

我刚刚得到这个问题,在这里张贴以备将来参考。 正在创建混沌的submitHandler内部的验证。 以下列方式更改代码的诀窍。

if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= (new Date(year, month, 0)))) 
    return false; 

if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= 31)) 
    return false; 

尝试了一些解决办法以invalidHandler没有运气。如果有人可以发布更好的答案,这将是非常可观的。

+1

Woww ...你是一个救世主......我在过去的2天里搞乱了我的代码......谢谢。 –

+0

很高兴它帮助。 :) –