비 - 폼 요소의 "Bubble"유효성 검사 메시지

페이지에 몇 가지 요소가 있습니다. 여기에 설명 된 바와 같이 멋진 풍선 스타일의 메시지를 사용하고 싶습니다. HTML5 form validation. 그것들을 사용하기 위해서는 양식 요소 안에 있어야하고 양식 제출을 시도한 후에 만 유효성 확인에 사용될 수 있어야합니다. 링크 된 예에서 촬영비 - 폼 요소의 "Bubble"유효성 검사 메시지

, 나는 (사용자가 지금은 전에 시간을 설정하는 경우, 즉이 예를 들어 거품 메시지를 팝업)이에 대해 설명 된대로 작동하도록 다음

바이올린을 얻는 방법을 알고 싶어 My attempt without form

<body> 
    <label> 
     Arrival Date: 
     <input id="arrivalDate" type="date" onchange="dateChanged()" /> 
    </label> 
    <input type="button" value="Test Reservation"></input> 

    <script type="text/javascript"> 
    function dateChanged(e){ 
     var arrivalDate = document.getElementById("arrivalDate"); 
     var value = new Date(arrivalDate.value); 
     if (value < new Date()) { 
      arrivalDate.setCustomValidity("Arrival date must be after now!"); 
     } else { 
      arrivalDate.setCustomValidity(""); 
     } 
     arrivalDate.checkValidity(); 
    } 
    </script> 
</body>

구체적 내 경우 I 2 KendoUI의 DateTimePickers 페이지에 동적 정보를 표시하기 위해 사용되는 시간 구간을 선택하기 위해 사용되고있다. 사용자가 종료 시간 이후에 시작 시간을 만들려고하면이 버블 메시지를 사용할 수 있으면 좋겠다.

출처

2013-05-27 James

유효성 검사를 수동으로 실행할 수있는 방법이 없습니다. .checkValidity()을 사용하면 귀하의 확인 내용이 유효하거나 그렇지 않은 경우에만 true/false를 반환합니다. 즉, form.checkValidity()을 수행 한 경우 모든 양식 요소가 유효한지 확인하거나 input.checkValidity()은 해당 단일 요소의 유효성 만 검사합니다.

유효성 검사를 트리거하는 유일한 방법은 제출할 때입니다. 제출 버튼을 가지고 click 함수를 호출하여이를 시뮬레이션 할 수 있습니다.

if (!arrivalDate.checkValidity()) 
{ 
    document.getElementById('submit_reservation').click(); 
}

바이올린 :http://jsfiddle.net/QGpQj/3/

참고 : 나는 때문에 인라인 이벤트 리스너의 window.dateChanged = ....을 추가했습니다. 실제로는 .addEventListener을 사용해야하며 그렇지 않은 경우 지원되지 않는 브라우저에 대해 이전 버전과의 호환성을 추가하려면 jQuery를 사용하는 것이 가장 이상적입니다.

출처

2013-05-27 11:57:38

폼없이이 팝업 풍선을 사용할 방법이 없습니까? – James

@ judgeja 불행히도. 어떤 형태로 포장하고 싶지 않은 이유가 있습니까? –

양식을 싸서 내 요소가 제대로 표시되지 않습니다. 간단한 수정이있을 것이라고 확신하지만 찾을 수는 없습니다. 나는 knockoutJS를 사용하고있다. (나는 새로 익숙하다.) 폼 요소는 모두 다른 하나의 아래에 표시된다. – James

비 - 폼 요소의 "Bubble"유효성 검사 메시지

답변

관련 문제