Please Check the Checkbox to Continue
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
Contact US
Thanks. We have received your request and will respond promptly.
Log In
Come Join Us!
Are you a
Computer / IT professional?
Join Tek-Tips Forums!
- Talk With Other Members
- Be Notified Of Responses
To Your Posts - Keyword Search
- One-Click Access To Your
Favorite Forums - Automated Signatures
On Your Posts - Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Posting Guidelines
Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Students Click Here
Change the Default Pop Up Message
2
- Forum
- Search
- FAQs
- Links
- MVPs
Change the Default Pop Up MessageChange the Default Pop Up Message(OP) Hi guys, I have the code below. It's working as I want it to be aside from the default popup message. Is it possible to change the message from "Please check this box if you want to proceed" to "Please select at least one box" Thanks for any help. CODE<html><head> <style> </style> </head> <body> <script src="jquery.min.js"></script> <form action="test.html"> <input type="checkbox" name="whatever" value="1" required="" class="required_group"> <input type="checkbox" name="whatever" value="2" required="" class="required_group"> <input type="checkbox" name="whatever" value="3" required="" class="required_group"> <input type="checkbox" name="whatever" value="4" required="" class="required_group"> <input type="submit" name="submit"> </form> <script type="text/javascript"> $('form').on('click', '.required_group', function() { $('input.required_group').prop('required', $('input.required_group:checked').length === 0); }); </script> </body></html> Red Flag SubmittedThank you for helping keep Tek-Tips Forums free from inappropriate posts. |
Join | Advertise
Copyright © 1998-2022 engineering.com, Inc. All rights reserved.
Unauthorized reproduction or linking forbidden without expressed written permission. Registration on or use of this site constitutes acceptance of our Privacy Policy.
Join Tek-Tips® Today!
Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.
Here's Why Members Love Tek-Tips Forums:
-
Talk To Other Members - Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close
Source: https://www.tek-tips.com/viewthread.cfm?qid=1809260
RE: Change the Default Pop Up Message
(OP)
any ideas guys?
RE: Change the Default Pop Up Message
Cant see the code thats driving the pop up in what you shared, so can only assume its coming from the included JS file, if this is all you need it for you can / should rework the code to use your own rather than loading in JQuery.
Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/
RE: Change the Default Pop Up Message
Hi
Greg, there the input's required attribute is toggled, so that is the browser's own message for unsatisfied required constraint.
See it in action on https://jsfiddle.net/eonpgjhf/
As far as I know, such error message can not be changed, if you want custom message, you have to set up a whole new custom validator using HTMLObjectElement.setCustomValidity(). But I have zero experience with that.
Feherke.
feherke.github.io
RE: Change the Default Pop Up Message
>Cant see the code thats driving the pop up
It's a default behaviour for HTML5
Probably simplest solution is to use HTML5's oninvalid property to override the default
eg
CODE --> HTML5
<html><head> <style> </style> </head> <body> <script src="jquery.min.js"></script> <form action="test.html"> <input type="checkbox" name="whatever" value="1" required="" class="required_group" oninvalid="this.setCustomValidity('Please select at least one option to proceed')" > <input type="checkbox" name="whatever" value="2" required="" class="required_group" oninvalid="this.setCustomValidity('Please select at least one option to proceed')"> <input type="checkbox" name="whatever" value="3" required="" class="required_group" oninvalid="this.setCustomValidity('Please select at least one option to proceed')"> <input type="checkbox" name="whatever" value="4" required="" class="required_group" oninvalid="this.setCustomValidity('Please select at least one option to proceed')"> <input type="submit" name="submit"> </form> <script type="text/javascript"> $('form').on('click', '.required_group', function() { $('input.required_group').prop('required', $('input.required_group:checked').length === 0); }); </script> </body></html>RE: Change the Default Pop Up Message
(OP)
Hi ggriffit, feherke & strongm,
I have tried the above on Brave, Firefox, Edge and Chrome but it doesn't seem to work. The pop-up message has changed but when I clicked a box (or even all of the boxes) the form won't submit and that same pop-up message appears.
RE: Change the Default Pop Up Message
Works fine on Edge here (well, mostly fine, due to the way HTML5 caches state)
It does require that jquery.min.js is available, which I assume is the case - although the symptoms you describe seem to indicate that it isn't loading.
RE: Change the Default Pop Up Message
Hi
Setting it oninvalid does not seem to be enough because
Unfortunately in absence of an onvalid event my best idea to clear is onclick :
CODE --> JavaScript ( fragment )
Which needs combined with the original code : https://jsfiddle.net/vczq21xb/
Feherke.
feherke.github.io
RE: Change the Default Pop Up Message
(OP)
Hi feherke, that's AWESOME! it worked. Thank you to all of you guys. Have a great day!