JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <form id="frm1">
            <input id="txt1" type="text" value="initially required" required="required">
            <input id="txt2" type="text" value="initially not required">
            <br />
            <div id="output">
            </div>
       </form>
    </body>
</html>

JavaScript

var out = $('#output');

function writeMessage(label, text)
{
    out.append($('<div>').html(label + ' : ' + (text || 'None')));
}

$(document).ready(function()
{
    writeMessage('Prop with required attr', $('#txt1').prop('required'));
    writeMessage('Prop no required attr', $('#txt2').prop('required'));
    writeMessage('Attr with required attr', $('#txt1').attr('required'));
    writeMessage('Attr no required attr', $('#txt2').attr('required'));
});