양식에 라디오/체크 박스 '필수'속성이 있습니까?

MDL 버전 : 1.3.0.양식에 라디오/체크 박스 '필수'속성이 있습니까?

브라우저 : 구글 크롬 55.0.2883.87 분

OS : 윈도우 10

나는 간단한 설문 조사에 대한 MDL를 사용하는 것을 시도하고있다. 라디오 또는 체크 박스가 포함 된 질문 목록. 라디오/체크 박스는 페이지가로드 될 때 사전 점검되지 않으며 사용자는 모든 응답에 대해 라디오 또는 적어도 하나의 체크 박스를 확인해야합니다. 사용자가 하나 이상의 질문에 대한 대답을 선택하지 않은 경우 제출 버튼을 클릭하면 표준 알림 (팝업, 첫 번째 라디오/확인란의 텍스트 '이 옵션 중 하나를 선택하십시오')이 표시되어야합니다.

라디오에 필수 속성을 사용하고 있지만 제출하는 동안 '깜박임'(매우 빠르게 보이고 숨김)되어 제대로 표시되지 않습니다.

간단한 demostration은 codepen에 있습니다.

<html> 
<head> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
</head> 

<body> 
    <br/> 
    <br/> 
    <form> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1"> 
      <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" required> 
      <span class="mdl-radio__label">First</span> 
     </label> 
     <br/> 

     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2"> 
      <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" required> 
      <span class="mdl-radio__label">Second</span> 
     </label> 
     <br/><br/> 
     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="submit" id="submit">Submit</button> 
    </form> 
</body> 

</html>

출처

2016-12-26 nicolausYes

문제는 코드에 없습니다. 그것은 단지 그렇게 작동합니다. 실제 문제는 스크립트에 있습니다.

제출 버튼의 스타일을 지정하기 위해 사용하는 부트 스트랩 스크립트는 필수 옵션으로 만들어지지 않았습니다. 댓글을 확인하고 싶다면 원하는대로 코드가 작동합니다. 메시지가 플래시로 전송되지 않습니다.

솔루션 : 제출 버튼에 자바 스크립트 기능을 사용하면 위의 두 필드 중 하나가 표시되었는지 여부를 확인할 수 있습니다.

출처

2016-12-26 14:51:55

CSS에 문제가 있습니다. 입력 (너비/높이 및 부채 = none)을 숨기면 오류 메시지가 매우 짧은 순간에만 표시됩니다. 입력이 보이지 않으면 예상되는 브라우저 동작 일 수 있습니까?

이 해결 방법은 도움이되지만 확실히 당신은 다른 형태의 입력 유형의 다른 문제를 처리해야합니다 :

.mdl-radio.is-upgraded .mdl-radio__button { 
position: absolute; 
width: 1px; 
height: 1px; 
margin: 0; 
padding: 0; 
opacity: 0; 
-ms-appearance: radio; 
-moz-appearance: radio; 
-webkit-appearance: radio; 
appearance: radio; 
border: none; 
margin-left: -20px;

}

Codepen : http://codepen.io/anon/pen/YpozzO

매우 비슷한 질문 : Material design lite required validation on checkbox is not showing error message

출처

2016-12-26 15:06:51 nikoskip

양식에 라디오/체크 박스 '필수'속성이 있습니까?

답변

관련 문제