×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

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

Change the Default Pop Up Message

Change 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> 

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

Quote (HTMLObjectElement.setCustomValidity)

It's vital to set the message to an empty string if there are no errors. As long as the error message is not null, the form will not pass validation and will not be submitted.

Unfortunately in absence of an onvalid event my best idea to clear is onclick :

CODE --> JavaScript ( fragment )

$('input.required_group')
    .on('invalid', function() { this.setCustomValidity('Please select at least one option to proceed') })
    .on('click', function() { $('input.required_group').each(function() { this.setCustomValidity('') }) }); 
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!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

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:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close