Select required attribute

Question

How can I make the select form required? I tried putting "required" but it doesn't work.

<div class="form-group">
    <label for="sel2">How many years have you been trading *</label>
    <select  class="form-control" id="sel2" required>
        <option>Please select one</option>
        <option>Start Up</option>
        <option value="1-2">1-3</option>
        <option value="3-4">3-4</option>
        <option value="5more">5 or more</option>
     </select>
</div>

Also for this one, I just got this from a website and I downloaded the zip file but I need to add a required attribute

<div class="form-group">
    <label>Country *</label><br>
    <div id="basic" data-input-name="country" required></div>
</div>


 <script>
$('#basic').flagStrap();

$('#origin').flagStrap({
    placeholder: {
        value: "",
        text: "Country of origin"
    }
});

$('#options').flagStrap({
    countries: {
        "AU": "Australia",
        "GB": "United Kingdom",
        "US": "United States"
    },
    buttonSize: "btn-sm",
    buttonType: "btn-info",
    labelMargin: "10px",
    scrollable: false,
    scrollableHeight: "350px"
});

$('#advanced').flagStrap({
    buttonSize: "btn-lg",
    buttonType: "btn-primary",
    labelMargin: "20px",
    scrollable: false,
    scrollableHeight: "350px",
    onSelect: function (value, element) {
        alert(value);
        console.log(element);
    }
});
</script>

score 2 · Answer 1 · edited May 05 '16 at 05:50

2

Required is not woking here because you have not set valued in all option.Set values in first two options:

<link href="view/css/flags.css" rel="stylesheet">

<select  class="form-control" id="sel2" required>
       <option value="">Please select one</option>
       <option  value="startup">Start Up</option>
       <option value="1-2">1-3</option>
       <option value="3-4">3-4</option>
       <option value="5more">5 or more</option>
 </select>

<script>
$('#basic').flagStrap();

$('#origin').flagStrap({
    placeholder: {
        value: "",
        text: "Country of origin"
    }
});

$('#options').flagStrap({
    countries: {
        "AU": "Australia",
        "GB": "United Kingdom",
        "US": "United States"
    },
    buttonSize: "btn-sm",
    buttonType: "btn-info",
    labelMargin: "10px",
    scrollable: false,
    scrollableHeight: "350px"
});

$('#advanced').flagStrap({
    buttonSize: "btn-lg",
    buttonType: "btn-primary",
    labelMargin: "20px",
    scrollable: false,
    scrollableHeight: "350px",
    onSelect: function (value, element) {
        alert(value);
        console.log(element);
    }
});
</script>

edited May 05 '16 at 05:50

Nnn

69
4
12

answered May 05 '16 at 04:55

Dhara Parmar

8,021
1
16
27

they make no sense as options anyway – May 05 '16 at 04:57
he need to set null value in "Please select one" option , but in "Start up" option may be have some value which i dont know..so i have just put null – Dhara Parmar May 05 '16 at 04:58
@Dagon Have you been trading for Start Up number of years as well? – Mike May 05 '16 at 05:21
@DharaParmar I tried putting values in it still not working :( – Nnn May 05 '16 at 05:24
@Nnn What value did you use for `Please select one`? – Mike May 05 '16 at 05:27
@Mike value="selectone" – Nnn May 05 '16 at 05:31
Set null in value of "Please select one" so it will be.. – Dhara Parmar May 05 '16 at 05:33
If you put null value in any of the option then only required will work – Dhara Parmar May 05 '16 at 05:33
@DharaParmar Calling an empty string a "null value" is confusing. – Mike May 05 '16 at 05:34
I mean to say value="" it means value is empty – Dhara Parmar May 05 '16 at 05:35
@DharaParmar Yes I understand that. It's just that in programming languages `null` is a special value and is completely different than an empty string (however it can often be type-cast to an empty string). – Mike May 05 '16 at 05:36
Ok mike..but here the point is to set value=""... – Dhara Parmar May 05 '16 at 05:39
@DharaParmar it worked now thank you!! – Nnn May 05 '16 at 05:40
@DharaParmar but what about for the second part? The country selector? – Nnn May 05 '16 at 05:42
what does the "basic" div contains? – Dhara Parmar May 05 '16 at 05:45
@DharaParmar I have no idea lol I just copy-pasted it. I edited my question and added the script can you please take a look at it? – Nnn May 05 '16 at 05:54

Select required attribute

1 Answers1