JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
    
    <input type="radio" name="r" id="r" required /> <label for="r">Radio button required</label><br>
    <input type="radio" name="r" id="r2" required /> <label for="r2">Radio button required</label><br>
    
    <p><a id="rr" href="#">Remove required on radio buttons</a></p>
    
    <p>In Firefox, the radio buttons are still required even after removing the required attribute.</p>
    

    <select required>
        <option value="">Please select</option>
        <option value="1">Option</option>
    </select>

    <p>In Firefox, the validation message is cropped to the width of the select</p>

    <input type="submit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    $(document).ready(function(e) {
        $('#rr').click(function(e) {
            $('input[type="radio"]').removeAttr('required');
            $('label').html($('label').html().replace('required', ''));
        });
    });
</script>
</body>
</html>