jQuery驗證插件：如果任何特定條件無效，重定向用戶

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

來源

2015-05-29 Vibhor Dube

'submitHandler'僅在「有效」表單上觸發，因此不是評估數據和處理錯誤的正確位置。 'submitHandler'僅用於驗證後提交數據*。 'invalidHandler'以「無效」形式觸發，並且會更好。 – Sparky

如果您認真尋求幫助，那麼您還需要向我們展示相關的HTML標記，並創建一個問題的[MCVE演示]（http://stackoverflow.com/help/mcve）。 – Sparky

我剛剛得到這個問題，在這裏張貼以備將來參考。正在創建混沌的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沒有運氣。如果有人可以發佈更好的答案，這將是非常可觀的。

來源

2015-06-04 09:42:14

Woww ...你是一個救世主......我在過去的2天裏搞亂了我的代碼......謝謝。 –

很高興它幫助。 :) –

jQuery驗證插件：如果任何特定條件無效，重定向用戶

回答

相關問題