validation of select box in javascript

Question

Hello I have developed a form where there are input box and select box. I want to give validation for both select box and input box . I am able to give validation for input box only.I am not able to give validation for select box with input box.

$(document).ready(function(){
    $("#myform").validate();
  });

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="myform">

      <label class="label1 col-md-4">Enter Template Name
        <span class="required"> * </span>
      </label>

      <input id="templateName" type="text" data-required="1" class="form-control" />
      </br>

      <label class="label1 col-md-4">Enter Admission Year
        <span class="required"> * </span>
      </label>


      <input id="admissionYear" type="text" data-required="1" maxlength="4" />
      </br>

      <label class="label1 col-md-4">Select the type of eligibility
        <span class="required"> * </span>
      </label>

      <select id="reportsSelect" class="form-control" data-placeholder="Select" tabindex="1">
        <option value="0">Choose</option>
        <option value="overall">Overall</option>
        <option value="specific">Specific subject</option>
      </select>
      </br>

      <button type="button">Submit</button>
    </form>

Where is your code? The one that does the validation of the input boxes. — ibrahim mahrir, Feb 04 '17 at 14:18
i have included javascript code. looking for some good suggestions — Arpit Gupta, Feb 04 '17 at 14:22
Possible duplicate of http://stackoverflow.com/questions/2901125/jquery-validate-required-select — ibrahim mahrir, Feb 04 '17 at 14:24
Possible duplicate of [jQuery Validate Required Select](http://stackoverflow.com/questions/2901125/jquery-validate-required-select) — ibrahim mahrir, Feb 04 '17 at 14:26

score 0 · Answer 1 · answered Feb 04 '17 at 14:24

Several "issues" here.

Your labels do not reference the inputs they belong to, either by having the input inside of them, or using the for attribute to reference the ID of the corresponding input.
placeholder on a <select> is meaningless
You should use required, not data-required="1" - this lets the browser do the validation without you needing any code at all. If you have any jQuery validation, delete it. This is 2017, you don't need it :p
A "no value" option for a select should be <option value="">. You can then add required to the <select> to require the user to select a value that isn't empty.
Use <input type="submit" value="Submit" /> or <button type="submit">Submit</button>, NOT <button type="button">
I assume you have a jQuery event handler to process the form. If you use the required attribute (browser-native validation) then you can just listen for the .on('submit') event on the form - it will not fire if anything is invalid.

score 0 · Answer 2 · answered Jan 08 '22 at 07:21

$(document).ready(function(){
    $("#myform").validate();
  });

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="myform">

      <label class="label1 col-md-4">Enter Template Name
        <span class="required"> * </span>
      </label>

      <input id="templateName" type="text" data-required="1" class="form-control" />
      </br>

      <label class="label1 col-md-4">Enter Admission Year
        <span class="required"> </span>
      </label>


      <input id="admissionYear" type="text" data-required="1" maxlength="4" />
      </br>

      <label class="label1 col-md-4">Select the type of eligibility
        <span class="required"> * </span>
      </label>

      <select id="reportsSelect" class="form-control" data-placeholder="Select" tabindex="1">
        <option value="0">Choose</option>
        <option value="overall">Overall</option>
        <option value="specific">Specific subject</option>
      </select>
      </br>

      <button type="button">Submit</button>
    </form>

validation of select box in javascript

2 Answers2