2015-02-01 2 views
0

양식의 유효성 검사를 시도하는 javascript, 특히 양식의 "type = date"부분이 있습니다. 하지만 양식조차 스크립트를 실행 (I 생각?)하고 여기 양식 제출시 Javascript 유효성 검사가 수행되지 않습니다.

에 지정된 페이지로 이동하지 않습니다를 제출 어떤 이유로 코드를 같은

<!-- script to make sure only weekdays are selected --> 
<script> 
var date = document.querySelector('[type=date]'); 

function noWeekends(e){ 

    var day = new Date(e.target.value).getUTCDay(); 

    // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday 

    if(day == 0 || day == 6){ 
     e.target.setCustomValidity('Please select a weekday.'); 
     return false; 
    } else { 
     e.target.setCustomValidity(''); 
    } 
} 
date.addEventListener('input',noWeekends); 
</script> 
<!--============================================================ 
=======================form starts here=========================--> 

<form action="confirm_booking.php" onsubmit="noWeekends()" method='post'> 
<?php 
echo "Room: "; 
select_room(); 
?> 
week starting: <input type=date name='WeekStart'/> 

<input type="submit" value="Book Room"> 
</form> 
+0

또한이 문제에 대해서는 잘 모르겠지만

태그에서 "NoWeekends (e)"대신 "NoWeekends()"를 onsubmit에 넣습니다. 어느 누구도 일하지 않았습니다 –

+0

아무것도 양식을 제출하지 못하게합니다. 함수에서 false가 반환되었습니다. 너무 늦었습니다. – adeneo

+0

제출시 유효성 검사를 실행할 필요가 없습니다. 그리고 IMHO date.addEventListener ('input', noWeekends); 작동하지 않을 수 있습니다. date.addEventListener ('keyup', noWeekends); ? – ddlab

답변

0
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    </head> 
    <body> 
     <form id="form" action="confirm_booking.php" method='post'> 
     <?php 
     echo "Room: "; 
     select_room(); 
     ?> 
     week starting: <input id="date" type=date name='WeekStart'/> 
     </form> 
     <input type="submit" value="Book Room" onclick="noWeekends()"> 
     <script> 
     function noWeekends(){ 
      var date = document.getElementById('date'); 
      var day = new Date(date.value).getUTCDay(); 
      console.log(day); 
      if(day == 0 || day == 6){ 
       date.setCustomValidity('Please select a weekday.'); 
       return false; 
      } else { 
       date.setCustomValidity(''); 
       document.getElementById("form").submit(); 
      } 
     } 
     </script> 
    </body> 
</html> 

작품입니다 예상

참고 : 제출 단추는 양식의 외부에 있으며, 클릭하면 스크립트가 실행되고 모든 것이 옳은지 프로그램 적으로 양식이 제출됩니다.

관련 문제