Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change the Default Pop Up Message 2

Status
Not open for further replies.
berkshirea

berkshirea

Technical User
Mar 22, 2009
97
GB
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>
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
Hi

Greg, there the [tt]input[/tt]'s [tt]required[/tt] attribute is toggled, so that is the browser's own message for unsatisfied required constraint.
See it in action on
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 [tt]HTMLObjectElement.setCustomValidity()[/tt]. But I have zero experience with that.


Feherke.
feherke.github.io
 
Upvote 0 Downvote
>Cant see the code thats driving the pop up

It's a default behaviour for HTML5


Probably simplest solution is to use HTML5's [tt]oninvalid[/tt] property to override the default

eg

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" 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>
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Hi

Setting it [tt]oninvalid[/tt] does not seem to be enough because
HTMLObjectElement.setCustomValidity said:
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.
Click to expand...

Unfortunately in absence of an onvalid event my best idea to clear is [tt]onclick[/tt] :
Code: 
$[teal]([/teal][i][green]'input.required_group'[/green][/i][teal])[/teal]
    [teal].[/teal][COLOR=orange]on[/color][teal]([/teal][i][green]'invalid'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal] [b]this[/b][teal].[/teal][COLOR=orange]setCustomValidity[/color][teal]([/teal][i][green]'Please select at least one option to proceed'[/green][/i][teal]) })[/teal]
    [teal].[/teal][COLOR=orange]on[/color][teal]([/teal][i][green]'click'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal] $[teal]([/teal][i][green]'input.required_group'[/green][/i][teal]).[/teal][COLOR=orange]each[/color][teal]([/teal][b]function[/b][teal]() {[/teal] [b]this[/b][teal].[/teal][COLOR=orange]setCustomValidity[/color][teal]([/teal][i][green]''[/green][/i][teal]) }) });[/teal]
Which needs combined with the original code :

Feherke.
feherke.github.io
 
Upvote 0 Downvote
Hi feherke, that's AWESOME! it worked. Thank you to all of you guys. Have a great day!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
330
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
299
malpa
malpa
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
92
spamjim
spamjim
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
267
coldbohemia
coldbohemia
iambob
  • Locked
  • Question
Send message using Java
Replies
2
Views
106
iambob
iambob

Part and Inventory Search

Sponsor

Back
Top