Required checkbox in html form using Safari
I created an html form with the required checkbox, for example:
<input type="checkbox" required name="terms"> I accept the terms.
If you are using browsers such as Explorer, Chrome, and Firefox, the form will not allow you to submit unless you check this box, but if you are using Safari, you can submit it even if you don't check it.
What can I do to fix this problem?
+3
source to share
2 answers
Safari does not support this attribute, you need to use JavaScript. You can add the functionality you want, for example here :
HTML:
<form action="" method="POST" id="formID">
Your name: <input required = "true"/>
<br />
<input type="submit" />
</form>
JavaScript:
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
alert('Please, fill the form'); // error message
}
}, false);
+2
source to share
As said, Safari does not support the attribute required
. You have to use Javascript like:
function checkForm() {
if ($('#terms').prop('checked') == false) {
alert("Check the terms man!");
return false;
}
alert("It is checked, it will proceed!");
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" onsubmit="return checkForm();">
<p>
<input type="checkbox" id="terms" name="terms" />I accept the Terms
<br/>
</p>
<p>
<input type="submit" />
</p>
</form>
0
source to share