如何保持檢查的形式更新的Javascript

在我的形式，我有這些元素[日] [月] [年]這使得用戶能夠輸入如何保持檢查的形式更新的Javascript

<form id="mail" action="form.php" method="post" onsubmit="validateForm()"> 
    <label for="dateOfBirth">Date of Birth</label> 
    <input type="number" id="day" name="day" max="31" placeholder="Day" > 
    <input type="number" id="month" name="month" placeholder="Month" max="12" > 
    <input type="number" id="year" name="year" placeholder="Year" max="2016"/> 
    <input type="submit" value="submit"> 
    </form>

當按鈕被按下提交，就應該檢查一下用戶超過18歲或沒有。如果他超過18歲，應提交表格。如果用戶未超過18歲，則應顯示錯誤。驗證年齡是工作的代碼，唯一的事情是，我不知道我應該怎麼把我的代碼

var day = getElementById("day").value; 
    var month = getElementById("day").value; 
    var year = getElementById("day").value; 
    var age = 18; 
    var mydate = new Date(); 
    mydate.setFullYear(year, month-1, day); 

    var currdate = new Date(); 
    var setDate = new Date();   
    setDate.setFullYear(mydate.getFullYear() + age, month-1, day); 

    function validateForm() { 

    if ((currdate - setDate) > 0){ 


     preventDefault();        // Prevent it being sent 
     var details = $('#mail').serialize();   // Serialize form data 
     $.post('form.php', details, function(data) { // Use $.post() to send it 
     $('#mail').html(data);     // Where to display result 
    }); 

     alert("above 18"); 
    }else{ 

     alert("below 18"); 
     $("form").submit(function(e){ 
      alert('submit intercepted'); 
      e.preventDefault(e); 
     }); 
    } 
}

代碼來檢查年齡http://jsfiddle.net/Ttsa8/5/

來源

2016-12-16 computer

附加一個事件監聽器來那些輸入....？ – NewToJS

你的問題不清楚。更新你的問題詳細 –

你如何計算無效日期？ – RobG

，如果你要計算的日期輸入的年齡字段（日，月，年）和當前時間，那麼你可以通過jquery這樣做。
它會在您更改字段值或提交表單時檢查年齡。
The idea was based on this.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>calculates the age between the date input fields and the current time</title> 
    <meta charset="utf-8"> 

    <script 
      src="https://code.jquery.com/jquery-3.1.1.min.js" 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
      crossorigin="anonymous"></script> 
</head> 

<body> 

<form id="form"> 
    <label for="dateOfBirth">Date of Birth</label> 
    <input type="number" id="day" name="day" max="31" placeholder="Day" > 
    <input type="number" id="month" name="month" placeholder="Month" max="12" > 
    <input type="number" id="year" name="year" placeholder="Year" max="2016"/> 
    <input type="submit" id="mail" value="submit"> 
</form> 

<script> 

    function validate() 
    { 
     if (!$("#day").val()) { 
      return false; 
     } 

     if (!$("#month").val()) { 
      return false; 
     } 

     if (!$("#year").val()) { 
      return false; 
     } 

     return true; 
    } 


    function calculateAge() 
    { 
     var ageLimit = 18; 

     var day = $("#day").val(); 
     var month = $("#month").val(); 
     var year = $("#year").val(); 

     if (!validate()) { 
      console.log('invalid form'); 
      return false; 
     } 

     todayDate = new Date(); 
     todayYear = todayDate.getFullYear(); 
     todayMonth = todayDate.getMonth(); 
     todayDay = todayDate.getDate(); 

     diffYear = todayYear - year; 

     if (todayMonth < (month - 1)) 
     { 
      diffYear--; 
     } 

     if ((month - 1) == todayMonth && todayDay < day) 
     { 
      diffYear--; 
     } 

     if (diffYear >= ageLimit){ 
      // you are above 18 
      console.log('above 18'); 
      return true; 
     } 

     console.log('below 18'); 


     return false; 
    } 

    $('#form').on('submit', function(e) { 

     if (!validate()) { 
      console.log('invalid form'); 
      return false; 
     } 

     if (calculateAge()) { 
      // the post will happen here if the form is valid and it is above the age limit 
      console.log('submit fired'); 
      return true; 
     } 
     console.log('submit blocked'); 
     return false; 
    }); 

    $('#month').on('change', function(e) { 
     calculateAge(); 
    }); 

    $('#day').on('change', function(e) { 
     calculateAge(); 
    }); 

    // This is a shortcut for .on("change", handler) 
    $('#year').change(function() { 
     calculateAge(); 
    }); 

</script> 

</body> 

</html>

來源

2016-12-16 01:14:21

使用這個想法我應該如何實現 - 如果是的話，然後提交/張貼到PHP – computer

我改變了代碼。檢查$（'＃form'）。on（'submit'，function（e）{}'例程。如果你設置了表單的'action'，它會在表單有效時提交數據， –

@computer：我很好奇它是否適合你這種方式？（不要忘記從代碼中刪除console.log行，因爲他們殺死IE瀏覽器） –

如何保持檢查的形式更新的Javascript

回答

相關問題