Required attribute not enabling using Jquery-CodePudding

I have been trying to test the required attribute using Jquery. I am enabling it for all the inputs with "class=keyclass"

<html>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
$(".keyclass").attr('required',true)
</script>
  
  <body>
    <form id="form1" >
        <div id='key'>
        <label for="firstname"><strong>First Name </strong></label>
        <input  id='firstname' type="text" placeholder="Enter name " name="keyvault">
        <label for="name"><strong>Last Name</strong></label>
        <input  id='lastname' type="text" placeholder="Enter name" name="name" >
        <input type="hidden" placeholder="Hidden Field" name="value">
        <label for="requestoremail"><strong>Requestor's Email Address</strong></label>
        <input  id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
        <label for="purpose"><strong>Purpose</strong></label>
        <input  id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
        </div>
     <button form="form1">Submit</button>
    </form>
  </body>
</html>

The strange thing is that it works in jsfiddle but not my own browser. Is there anything wrong in the code?

CodePudding user response：

hello script tag move to bottom

<!DOCTYPE html>
<html>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



  
  <body>
    <form id="form1" >
        <div id='key'>
        <label for="firstname"><strong>First Name </strong></label>
        <input  id='firstname' type="text" placeholder="Enter name " name="keyvault">
        <label for="name"><strong>Last Name</strong></label>
        <input  id='lastname' type="text" placeholder="Enter name" name="name" >
        <input type="hidden" placeholder="Hidden Field" name="value">
        <label for="requestoremail"><strong>Requestor's Email Address</strong></label>
        <input  id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
        <label for="purpose"><strong>Purpose</strong></label>
        <input  id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
        </div>
     
     <button form="form1">Submit</button>
      
     
    </form>

    <script>
        $(".keyclass").attr('required',true);
    </script>
  </body>
</html>