form required patterns in html

Question

How can i make it that its not allowed to choose Select (first option) from the dropdown:

<div>
    <label for="sc" accesskey="s">Scolarship</label>
    <select name="sc" id="sc" required="required">
        <option value="0">Select</option>
        <option value="1">No</option>
        <option value="2">Yes</option>
    </select>
</div>

The required attribute is not supported in any major browser. So either use a radiobutton as @kingkero sugests, or make some validation in JavaScript. I'll choose the first. — Guidhouse, Apr 26 '15 at 14:41

score 2 · Answer 1 · answered Apr 26 '15 at 14:39

You can prevent 'select' from been chosen in one of the following ways: 1. Remove the option value from it 2. Using Javascript and 3. disabling it

REMOVE THE OPTION VALUE

If the code is rewritten as:

    <label for="sc" accesskey="s">Scolarship</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <select name="sc" id="sc" required="required">
        **<option>Select</option>**
        <option value="1">No</option>
        <option value="2">Yes</option>
    </select>

This will prevent the select option from being submitted with a value, then you can catch this error by throwing an error message due to empty submit value upon validation

USING JAVASCRIPT (JQuery In particular)

You can use javascript to prevent the select option from been selected as in:

 <script>
     $(function(){
       $("#sc").on("change", function(){
       var val=  $("#sc").val();
       if (val == 0)
       {
          //Tell the user that the select option can't be selected then change it to 'no'
         $("#sc").val(1);
       }
     });
   });
 </script>

DISABLING THE SELECT OPTION

The third available option and the least advisable is to disable it using the 'disable keyword':

<label for="sc" accesskey="s">Scolarship</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <select name="sc" id="sc" required="required">
        **<option value="0" disabled>Select</option>**
        <option value="1">No</option>
        <option value="2">Yes</option>
    </select>

The downfall of using this method is that the 'select option' is selected immediately the form is loaded it is very possible that the user submits the form immediately it finishes loading without selecting any option leaving the 'select option' has the submit value.

A l w a y s S u n n y · Accepted Answer · 2015-04-26T14:41:33.960

Try this way to set disable attribute your first option of select element

//HTML FORM EXAMPLE
    <form action="#" method="post">
<div>
        <label for="sc" accesskey="s">Scolarship</label>&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="sc" id="sc" required="required">
            <option value="0" disabled="disabled" >Select</option>
            <option value="1">No</option>
            <option value="2">Yes</option>
        </select>
    </div> 
    <input type="submit" value="Submit" />
</form>

//JS CODE

$('form').submit(function(e){
    if ( document.getElementsByName('sc')[0].value == 0 ){
        alert('Select something !');    
    e.preventDefault();
    }else{
    alert("form is perfect");
    } 
});

See fiddle http://jsfiddle.net/8oswdnLo/2/

score 0 · Answer 3 · answered Apr 26 '15 at 14:24

0

Use the disabled attribute, i.e. <option value="0" disabled>Select</option>. However, since it is the default option, it will be initially selected anyway.

answered Apr 26 '15 at 14:24

tsnorri

1,966
5
21
29

score 0 · Answer 4 · answered Apr 26 '15 at 14:26

0

You can leave first option empty and on submit, you can check if there are any option selected or not. Ir you can check even with Select string.

answered Apr 26 '15 at 14:26

dpaul1994

332
3
16

Im a beginner, could you go throught it with me? i made the first option empty but now when i submit the form, it works even though i have chosen the option which is empty. – Sam Apr 26 '15 at 14:29
First check the other answer and check if you found the solution. – dpaul1994 Apr 26 '15 at 14:38

Robin Carlo Catacutan · Answer 5 · 2015-04-26T14:34:24.253

0

Try this.

<div>
        <label for="sc" accesskey="s">Scolarship</label>&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="sc" id="sc" required="required">
            <option disabled="disabled">Select</option>
            <option value="1">No</option>
            <option value="2">Yes</option>
        </select>
    </div>

edited Apr 26 '15 at 14:34

answered Apr 26 '15 at 14:29

Robin Carlo Catacutan

13,249
11
52
85

works but if i don't choose anything and keep it at select , the form submits anyways which is incorrect. – Sam Apr 26 '15 at 14:31
You will need JS for that, which will check if there's no valid value selected then don't submit – Robin Carlo Catacutan Apr 26 '15 at 14:34

score 0 · Answer 6 · answered Apr 26 '15 at 14:34

0

In this scenario, it might make more sense to use radiobuttons instead of a select.

<div>
    <label for="sc" accesskey="s">Scolarship</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="sc" value="1"> Yes
    <input type="radio" name="sc" value="2"> No
</div>

Now there is no select option anymore that mustn't be selected.

answered Apr 26 '15 at 14:34

kero

10,647
5
41
51

yes but i have tried it, at first none is selected when i submit the form it submits which is incorrect. It should require one of them chosen. should i check one of them? – Sam Apr 26 '15 at 14:42
@Sam You will need to write some logic for that (possibly in JavaScript). There are [answers like this](https://stackoverflow.com/questions/1423777/javascript-how-can-i-check-whether-a-radio-button-is-selected) showing you how to check if a radio button is selected – kero Apr 26 '15 at 14:43

form required patterns in html

6 Answers6

REMOVE THE OPTION VALUE

USING JAVASCRIPT (JQuery In particular)

DISABLING THE SELECT OPTION