Validate dropdown values with javascript

Question

I have a registration form where user has to select and then attach his/her ID documents/pics. There are primary document types (ex: Passport, Driv. Lic etc) and secondary and additional.

Each document type has some points value (ex Passport: 70 Points), I want some kind of Javascript validation thing which on selecting Document Type (dropdown) checks if the total value of selected document types is at least 100 points, otherwise return error message that "You need atleast 100 points od ID".

<div class="row setup-content" id="step-3">
                    <legend>100 Poins of ID</legend>

                    <div class="form-group">
                        <label class="control-label col-sm-4">Primary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType1" id="fileType1">
                                <option value="">Select type of ID</option>
                                <option value="Birth Certificate (70 pts)">Birth Certificate (70 pts)</option>
                                <option value="Australian Passport (70 pts)">Australian Passport (70 pts)</option>
                                <option value="Australian Citizen Certificate (70 pts)">Australian Citizen Certificate (70 pts)</option>
                                <option value="Overseas Passport (70 pts)">Overseas Passport (70 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file1" id="file1" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Secondary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType2" id="fileType2">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (40 pts)">AUS Govt. Issued Current Licence or Permit (40 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (40 pts)">Working With Children/Teachers Registration Card (40 pts)</option>
                                <option value="Health Care Card (40 pts)">Health Care Card (40 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (40 pts)">Current Tertiary Education Institution Photo ID (40 pts)</option>
                                <option value="Reference from a doctor (40 pts)">Reference from a doctor (40 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver&#39s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Additional document (optional):</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType3" id="fileType3">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (25 pts)">AUS Govt. Issued Current Licence or Permit (25 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (25 pts)">Working With Children/Teachers Registration Card (25 pts)</option>
                                <option value="Health Care Card (25 pts)">Health Care Card (25 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (25 pts)">Current Tertiary Education Institution Photo ID (25 pts)</option>
                                <option value="Reference from a doctor (25 pts)">Reference from a doctor (25 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver’s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file3" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <input type="hidden" name="spam" />
                    <button type="submit" id="submit-btn" name="register" class="btn btn-warning pull-right"><i class="glyphicon glyphicon-send"></i>&nbsp; Submit</button>
                </div> <!-- End Step 3 -->

Well, i have a minor experience in JavaScript

sohal07
– sohal07

2015-10-22 02:11:37 +00:00
Commented Oct 22, 2015 at 2:11 — sohal07
– sohal07, Commented Oct 22, 2015 at 2:11

E. Sundin · Accepted Answer · 2015-10-22 03:31:57Z

1

If this is only supposed to be a client-side validation this might work for you.

Add a data-points to each option element in your selects. For example <option data-points="45" value="Worth 45 points">Worth 45 points</option>.

Then you could use this to calculate how many total points you have:

function calcPoints() {
    var points = 0;

    // Returns NodeList of selected options
    var selects = document.querySelectorAll("option:checked");

    // Convert to an Array
    selects = Array.prototype.slice.call(selects,0);

    selects.forEach(function(option) {
            points += Number(option.getAttribute('data-points'));
    })

    // Do something with the points variable
    console.log(points);
}

// Listen for click on the submit button
document.getElementById("submit-btn").addEventListener('click', calcPoints);

edited Oct 22, 2015 at 3:31

answered Oct 22, 2015 at 2:48

E. Sundin

4,1901 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sohal07 Over a year ago

Thank you. Was quick, easy and short.

Leo Nix · Accepted Answer · 2015-10-22 03:17:54Z

This was interesting to solve with just the HTML you've provided.

Here is a fiddle link which demonstrate a solution:

If you run the code on SO page go full page view to see it better.

var totalPoints=0, primePoints=0, secondPoints=0, additionalPoints=0;
$("#fileType1").change(function(){
  $( "#fileType1 option:selected" ).each(function(){
      var text = /\d+/.exec($(this).text());
      totalPoints-=primePoints;
      
      if (text===null) primePoints=0;
      else primePoints = parseInt(text[0]);
      
      totalPoints+=primePoints;
      $("#totalPoints").html(totalPoints);
  });
});

$("#fileType2").change(function(){
  $( "#fileType2 option:selected" ).each(function(){
     var text = /\d+/.exec($(this).text());
      totalPoints-=secondPoints;
      
      if (text===null) secondPoints=0;
      else secondPoints = parseInt(text[0]);
      
      totalPoints+=secondPoints;
      $("#totalPoints").html(totalPoints);
  });
});

$("#fileType3").change(function(){
  $( "#fileType3 option:selected" ).each(function(){
     var text = /\d+/.exec($(this).text());
      totalPoints-=additionalPoints;
      
      if (text===null) additionalPoints=0;
      else additionalPoints= parseInt(text[0]);
      
      totalPoints+=additionalPoints;
      $("#totalPoints").html(totalPoints);
  });
});

$("#submit-btn").click(function(){
if (totalPoints<70) alert("You have " + totalPoints + " but still need at least 100 points od ID");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row setup-content" id="step-3">
                    <legend>100 Poins of ID</legend>

                    <div class="form-group">
                        <label class="control-label col-sm-4">Primary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType1" id="fileType1">
                                <option value="">Select type of ID</option>
                                <option value="Birth Certificate (70 pts)">Birth Certificate (70 pts)</option>
                                <option value="Australian Passport (70 pts)">Australian Passport (70 pts)</option>
                                <option value="Australian Citizen Certificate (70 pts)">Australian Citizen Certificate (70 pts)</option>
                                <option value="Overseas Passport (70 pts)">Overseas Passport (70 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file1" id="file1" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Secondary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType2" id="fileType2">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (40 pts)">AUS Govt. Issued Current Licence or Permit (40 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (40 pts)">Working With Children/Teachers Registration Card (40 pts)</option>
                                <option value="Health Care Card (40 pts)">Health Care Card (40 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (40 pts)">Current Tertiary Education Institution Photo ID (40 pts)</option>
                                <option value="Reference from a doctor (40 pts)">Reference from a doctor (40 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver&#39s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Additional document (optional):</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType3" id="fileType3">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (25 pts)">AUS Govt. Issued Current Licence or Permit (25 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (25 pts)">Working With Children/Teachers Registration Card (25 pts)</option>
                                <option value="Health Care Card (25 pts)">Health Care Card (25 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (25 pts)">Current Tertiary Education Institution Photo ID (25 pts)</option>
                                <option value="Reference from a doctor (25 pts)">Reference from a doctor (25 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver’s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file3" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                            <div id="totalPoints"></div>
                    <input type="hidden" name="spam" />
                    <button type="submit" id="submit-btn" name="register" class="btn btn-warning pull-right"><i class="glyphicon glyphicon-send"></i>&nbsp; Submit</button>
                </div> <!-- End Step 3 -->

Collectives™ on Stack Overflow

Validate dropdown values with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related