Validating select input

[Stribor45]

i have trouble validating this code…

 <select id="myid" name="myid" required>
                  <option value="AB">Alberta</option>
                  <option value="BC" selected>British Columbia</option>
                  <option value="MB">Manitoba</option>
                  <option value="NB">New Brunswick</option>
                  <option value="NL">Newfoundland and Labrador</option>
                  <option value="NS">Nova Scotia</option>
  </select>

I tried adding size attribute but that didn’t help and it produced output I don’t want. I know I can solve this by adding empty option but i dont want my users to be able to select empty option.

http://maxdesign.com.au/articles/select-required/

[Ray.H]

@Stribor45

I know I can solve this by adding empty option but i dont want my users to be able to select empty option.

As the link you posted suggests, you can make the first option have an empty value.

Then it will validate and your users won’t be able to select it since it has an empty value.

<option value="">Choose Province</option>

And it tells them that they need to… select an option.

<select id="myid" name="myid" required>
   <option value="">Choose Province</option>
   <option value="AB">Alberta</option>
   <option value="BC">British Columbia</option>
   <option value="MB">Manitoba</option>
   <option value="NB">New Brunswick</option>
   <option value="NL">Newfoundland and Labrador</option>
   <option value="NS">Nova Scotia</option>
</select>

[Stribor45]

Yes but only validation this provide is browser native validation (if “Chose Province” is selected gets red border)

[Stribor45]

@Ray.H

<select id=“myid” name=“myid” required>
<option value=“” disabled>Choose Province</option>
<option value=“AB”>Alberta</option>
<option value=“BC”>British Columbia</option>
<option value=“MB”>Manitoba</option>
<option value=“NB”>New Brunswick</option>
<option value=“NL”>Newfoundland and Labrador</option>
<option value=“NS”>Nova Scotia</option>
</select>

above validates

[Ray.H]

@Stribor45

above validates

Does that solve the problem?

@Stribor45

if “Chose Province” is selected gets red border

I may have been confused on which validation you are referring to.
The article is discussing HTML Markup Validation, were you referring to server-side form validation.

[Stribor45]

validation as found here https://html5.validator.nu/

Disabling"Chose Province" validates

[Ray.H]

Okay, we are talking about HTML Markup Validation.

It also validated without being disabled.

The red border from the browser alerts the user to select a valid option for form validation.

Either way, it looks like you have two ways to handle it now.

[Stribor45]

Ok i have this problem now…

As or right now I am done validating form data using js and passing data to server via Ajax. My files are…

pagewithForm.php – this has my form in and some templates thats why I need it to be php instead of html
jscript.js – here I do some form validation and ajax call etc.
myphpfile.php – i am successfully receiving data from Ajax call

Now question comes…What if user have js disabled?

my pagewithForm.php form tag looks like this…

<form id="someform"  method="post" action=""<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"">

With current file structure and assuming one of my form fields is phone number how would i pass back an error on validating this in my pagewithForm.php to my pagewithForm.php.

I want to let user know “hey re-type this number please”

Thanks