Radio/checkbox 'required' attribute in a form?
Question
MDL Version: 1.3.0.
Browser: Google Chrome 55.0.2883.87 m
OS: Windows 10.
I'm trying to use MDL for a simple survey. List of questions with radios or checkboxes as answers. Radios/Checkboxes are not pre-checked when a page is loading and User has to check a radio or at least one checkbox for every answer. If User didn't select the answer for at least one question, the standard notification (popup, pointing to the first radio/checkbox with a text 'Please select one of this options') should be shown when clicking on Submit button.
I'm using the required attribute for radio, but while submitting the desired popup is only 'blinking' (show and hide very fast) and not showing properly.
Simple demostration is on 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>
2 answers
solution1
0 2016-12-26 14:51:55
The problem is not in the code. It does work like that only. The real problem lies in the script
The bootstrap script you are using to style your submit button is not made with the required option. If you want to check it comment it and your code will work as you want.The message would not go as a flash.
Solution: You can use a Javascript function on Submit button which will check whether one of the above two fields are marked or not.
solution2
0 2016-12-26 15:06:51
There is an issue in the CSS. It seems if you hide the input (no width/height and appereance = none ), the error message shows up only for a very small moment. Maybe it's a expected browser behavior if the input is not visible?
This workaround will help, but for sure you will have to deal with other issues in others types of form inputs:
.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
Very similar question: Material design lite required validation on checkbox is not showing error message
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.