'Required attribute not enabling using Jquery

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 class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
        <label for="name"><strong>Last Name</strong></label>
        <input class="keyclass" 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 class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
        <label for="purpose"><strong>Purpose</strong></label>
        <input class="keyclass" 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?

htmljquery


Solution 1:[1]

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 class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
        <label for="name"><strong>Last Name</strong></label>
        <input class="keyclass" 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 class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
        <label for="purpose"><strong>Purpose</strong></label>
        <input class="keyclass" id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
        </div>
     
     <button form="form1">Submit</button>
      
     
    </form>

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ALI JAMALI

Related Questions