Javascript onclick confirm not working with "required" tag HTML

Question

I have a <select> list written in HTML and it's marked with the <required> tag for validation. Like this <select name="users" width="200" size="11" style="outline:none" required>

And a submit button for the form <input type="submit" onclick="return confirm(\Are you sure to disable this user?\'); value="Disable user" formaction="disableuser">

But when I submit the form without selecting a user from the list it still fires the confirm pop-up, even nothing is selected. I'm stuck with this, can somebody help me? Thanks.

validate using javascript. don't rely on browser features or adherance to standards... IE will allways throw a wrench in the works, or another browser. — Tschallacka, Mar 19 '14 at 08:33
Make sure that the select and the submit button are enclosed in a form — VinhNT, Mar 19 '14 at 08:35
The required attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome. See this example: http://www.w3schools.com/tags/att_input_required.asp — VinhNT, Mar 19 '14 at 08:37
@VinhNT I'm using IE11, Firefox and Chrome for my development. All are the newest versions. But I will look to use javascript validation if possible. — Stefan, Mar 19 '14 at 08:39
Tested this (with typos fixed) on Chrome, Firefox, IE – they all issue a browser-generated message instead of triggering the `onclick` handler. It’s different if you have `size="1"`. Please check that the code in the question matches your real code (and post code as sent to browser, rather than content of a .php file). — Jukka K. Korpela, Mar 19 '14 at 08:46
Those slashes are needed there otherwise it won't work (just tested it). My code in the question matches my real code so no typos. Why it's different with the `size` tag? — Stefan, Mar 19 '14 at 08:56
The “slashes” (backslashes, “\”) relate to PHP, not HTML. Please post the actual HTML code as received by a browser, and provide code that actually reproduces the problem. The code in the question is incomplete, and when completed to a minimal document does *not* reproduce the problem. — Jukka K. Korpela, Mar 19 '14 at 09:17

score 1 · Accepted Answer · answered Mar 19 '14 at 08:40

1

Try this..

function Submit() {
    if(//check whether a user is selected)
    {
       var r = confirm("Are you sure to disable this user?");
       if (r == true) {
           //do what ever you need
       }
       else {
        return;
       }
    }
    else
    {
        alert('Please select a user!!!');
    }
}

Invoke Submit() on onclick of submit button...

answered Mar 19 '14 at 08:40

Jameem

1,840
3
15
26

This does not address the question (why the `required` attribute does not work). – Jukka K. Korpela Mar 19 '14 at 08:44
After a few tries it finally works. I think this is better then the `` tag, thanks. – Stefan Mar 19 '14 at 09:44

score 0 · Answer 2 · edited May 23 '17 at 12:05

I am assuming that the code actually has size="1" instead of size="11", because with the latter, the problem does not arise (on modern browsers). For size=1, the first option is interpreted as selected, so the element satisfies the requiredness constraint even when the user has not made any selection. To avoid this, insert a dummy option with an empty value. It is customary to use it in a placeholder-like manner:

<select name="users" width="200" size="1" style="outline:none" required>
<option value="">Select a user:
<option>foo
<option>bar
</select>

The issue is explained in detail at Can I apply the required attribute to <select> fields in HTML5?

As always, you should not rely on any client-side checks; they are for user comfort, not for security. The processing of the form data server-side should be based on the assumption that the user is a malevolent hacker who uses a modified version of your form. In particular, in this case, the value of users can be literally anything.

My select list is not a dropdown menu, that's why i'm using `size="11"`. The list is a normal one like a `

Javascript onclick confirm not working with "required" tag HTML

2 Answers2