CODEWITHSUNDEEP
jqueryhtmlvalidation
bill
bill

Reputation: 864

How to validate HTML dropdown lists and input fields before clicking the submit button using jQuery

This is my question: I have three drop-down lists and two input fields. This is my code.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
   
  Name : <input type="text" id="one"/><br/><br/><br/>
  <label for="two">Select category</label>
   <select id="two">
   	<option>--select--</option>
   	<option>books</option>
   	<option>penss</option>
   	<option>pensils</option>
   	<option>erasers</option>
   </select>
 <br/><br/><br/>
   <label for="three">Select country</label>
    <select id="three">
   	<option>--select--</option>
   	<option>japan</option>
   	<option>canada</option>
   	<option>usa</option>
   	<option>uk</option>
   </select>
<br/><br/><br/>
   Amount :<input type="text" id="four"/>
<br/><br/><br/>
    <label for="five">Select city</label>
    <select id="five">
   	<option>--select--</option>
   	<option>ottawa</option>
   	<option>washinton</option>
   	<option>austin</option>
   	<option>texas</option>
   </select>
<br/><br/><br/>
<input type="submit">
</body>
</html>

So what I want is to validate like this,

If the user selects any field (input or section) from any place, not selected fields should be validated. They cannot use the submit button. As an example if the user selects the middle selection (countries) and at that time other fields are not selected all should validate on clicking of the select. How can I do that?

Upvotes: 2

Views: 5448

Answers (3)

pritesh
pritesh

Reputation: 543

Try this code and tell me if this is what you want. I will change it according to your need otherwise.

$(function(){
  $("#two,#three,#five").change(function(){
    var text='';
    
    if($("#one").text() == '') alert('enter in one');
      
    
    text = $("#two").find(":selected").text();
    if(text == '--select--') alert("select two");
    
    text = $("#three").find(":selected").text();
    if(text == '--select--') alert("select three");
    
    if($("#one").text() == '') alert('enter in four');
    
    text = $("#five").find(":selected").text();
    if(text == '--select--') alert("select five");
    
    
  });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
   
  Name : <input type="text" id="one"/><br/><br/><br/>
  <label for="two">Select category</label>
   <select id="two">
   	<option>--select--</option>
   	<option>books</option>
   	<option>penss</option>
   	<option>pensils</option>
   	<option>erasers</option>
   </select>
 <br/><br/><br/>
   <label for="three">Select country</label>
    <select id="three">
   	<option>--select--</option>
   	<option>japan</option>
   	<option>canada</option>
   	<option>usa</option>
   	<option>uk</option>
   </select>
<br/><br/><br/>
   Amount :<input type="text" id="four"/>
<br/><br/><br/>
    <label for="five">Select city</label>
    <select id="five">
   	<option>--select--</option>
   	<option>ottawa</option>
   	<option>washinton</option>
   	<option>austin</option>
   	<option>texas</option>
   </select>
<br/><br/><br/>
<input type="submit">
</body>
</html>

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to use value for each option like,

$(function() {
  // bind click event for validation
  $('#btnSubmit').on('click', function() {
    var msg = [];
    $('input[type="text"],select').each(function() {
      if (this.value.trim().length === 0) {
        msg.push('please enter value for: ' + this.id);
      }
    });
    if (msg.length) {
      alert(msg.join("\n"))
    }
  });
  // select on change check value
  $('select').on('change', function() {
    if (!this.value) {
      alert('please select value for: ' + this.id);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  Name :
  <input type="text" id="one" />
  <br/>
  <br/>
  <br/>
  <label for="two">Select category</label>
  <select id="two">
    <option value="">--select--</option>
    <option value="books">books</option>
    <option value="penss">penss</option>
    <option value="pensils">pensils</option>
    <option value="erasers">erasers</option>
  </select>
  <br/>
  <br/>
  <br/>
  <label for="three">Select country</label>
  <select id="three">
    <option value="">--select--</option>
    <option value="japan">japan</option>
    <option value="canada">canada</option>
    <option value="usa">usa</option>
    <option value="uk">uk</option>
  </select>
  <br/>
  <br/>
  <br/>Amount :
  <input type="text" id="four" />
  <br/>
  <br/>
  <br/>
  <label for="five">Select city</label>
  <select id="five">
    <option value="">--select--</option>
    <option value="ottawa">ottawa</option>
    <option value="washinton">washinton</option>
    <option value="austin">austin</option>
    <option value="texas">texas</option>
  </select>
  <br/>
  <br/>
  <br/>
  <input type="submit" id="btnSubmit" />
</body>

</html>

And you can also try Jquery Validation Plugin

Upvotes: 0

danish farhaj
danish farhaj

Reputation: 1354

You have to use change function of dropdown 

$("#dropdownID" ).change(function() {
     //You can write validate code here...
     alert( "Handler for .change() called." );
});

Upvotes: 0

Related Questions