Can't get form to validate required select input

Question

Created this very simple code to replicate my issue. Form will not submit if input text has no value (correct). But it will submit if select input not chosen (incorrect). I'm probably missing something very basic here, but I don't know what.

Edit: Just realized this works in Firefox; but not Chrome.

Edit 2: Chrome is rendering my page with the following, instead of what I have in my code.

<option value>Select</option>

Any ideas why? It's a .razor page if that matters. But based on other research, not having the value="" is why it's not working in Chrome.

     <form>
        <div>
            Any Text: 
            <input type="text" required="required" />
        </div>
        <div>
            Country: 
            <select required="required">
                <option value="">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </div>
        <div>
            <button type="submit">
                Test
            </button>
        </div>
    </form>

Edit 3: I got the HTML to render correctly in Chrome with the following workaround, but the validation in Chrome still does not work:

  <form>
        <div>
            Any Text:
            <input type="text" required="required" />
        </div>
        <div>
            Country:
            <select required="required">
                <option value="@blankString">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </div>
        <div>
            <button type="submit">
                Test
            </button>
        </div>
    </form>

@code {
    string blankString = "";
}

Page code source:

<select required="required">
                <option value="">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>

This seems to be working for me in my chrome. Just try removing the variable and directly adding a as your first pre-selected option. Or Just copy your page code source and paste it in place of your code. — vS12, Sep 27 '19 at 21:14
Actually, I just created this code in a simple .html file with no issue. So it's something else in my .razor page that must be overriding the required attribute or something in the select input. — Katie P, Sep 27 '19 at 22:32

score 0 · Answer 1 · answered Mar 29 '20 at 08:16

0

Had the same problem - ended up using js to to disable/enable button like here:

Disable button when no option is selected from dropdown

answered Mar 29 '20 at 08:16

J Asgarov

2,526
1
8
18

Can't get form to validate required select input

1 Answers1