I want to add a custom validation message to my radio buttons group that I have.
It works fine in the below conditions:
- If I select the second radio button "female" and click on submit.
- If I select the first radio button "male" and click on submit.
- If I do not select any radio button and click on submit, it shows me the validation message. On selecting the first radio button and clicking submit, the form is submitted.
It does not work in the below condition:
- If I click on submit without checking any radio button, it shows me the validation message. After that if I select the second radio button "female" and click on submit, it still shows me the validation message on the first radio button "male".
Below is the code I have written
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<div class="container">
<form id="myForm">
<div class="row">
<input type="radio" name="gender" value="male" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" value="female" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="female">Female</label>
<br>
</div>
<div class="row">
<div class="col">
<input class="submit_button" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</body>
</html>I know this custom validation issue can be fixed by writing a function in javascript/jquery. But I would like to know if there is a way to do this inline or if there is any documentation that states it cannot be done.
Note : If I do not put the custom validation code oninvalid="this.setCustomValidity('Please select your gender')" oninput="this.setCustomValidity('')". All the conditions work correctly.