Radio/checkbox 'required' attribute in a form?

Question

Radio/checkbox 'required' attribute in a form?

678 Views Asked by nicolausYes At 10 April 2025 at 16:39

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>

Original Q&A

There are 2 best solutions below

**Mukul Kashiv** · Answer 1

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.

**nikoskip** · Answer 2

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

Radio/checkbox 'required' attribute in a form?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in MATERIAL-DESIGN

Related Questions in MATERIAL-DESIGN-LITE

Trending Questions

Popular # Hahtags

Popular Questions