选择单选按钮后如何使必填项为空

Question

I am trying to change the name of required when it is not selected and I did it. When I click "Send" without selecting it first, it will show an error, but when I selected it again but not the first radio button where I put the required syntax it still shows the same error that forced me to select the first radio button. Is there a way to make it right, please? Thank you for the help.

This is my code:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <form method="post" action="" id="form"> <div class="container"> <div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76"> <div class="section-heading-upper"> <p class="mb-3 lead">1. ......? </p> </div> <div class="row ml-2"> <div class="col-auto"> <div class="form-group mx-auto option"> <h2 class="section-heading mb-2"> <span class="text-center section-heading-upper">Layanan</span> </h2> <div class="form-check"> <input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')"> <label class="form-check-label" for="exampleRadios1"> Sangat Penting </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25"> <label class="form-check-label" for="exampleRadios2"> Penting </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50"> <label class="form-check-label" for="exampleRadios3"> Tidak Penting </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75"> <label class="form-check-label" for="exampleRadios4"> Sangat Tidak Penting </label> </div> </div> </div> <div class="col-auto"> <div class="form-group mx-auto option"> <h2 class="section-heading mb-2"> <span class="text-center section-heading-upper">Kepuasan Layanan</span> </h2> <div class="form-check"> <input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')"> <label class="form-check-label" for="exampleRadios1"> Sangat Puas </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25"> <label class="form-check-label" for="exampleRadios2"> Puas </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50"> <label class="form-check-label" for="exampleRadios3"> Tidak Puas </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75"> <label class="form-check-label" for="exampleRadios4"> Sangat Tidak Puas </label> </div> </div> </div> </div> <div class="text-center mt-2"> <input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()"> </div> </form> 

Answer 1

You can remove required attributes and test whether a specific one is checked using jQuery as follows:

if ($('input[name=penting1]:checked').length > 0) {
    //selected
}

if ($('input[name=puas1]:checked').length > 0) {
    //selected
}

it will work :)