CODEWITHSUNDEEP
jqueryinput
Ramez GaIal
Ramez GaIal

Reputation: 85

How to specify each input

i want to put a red bottom under the empty input only not all inputs, what i need to fix or add in this example to make this work, 

$(function() {
  $('#submit').on('click', function() {
    var myTitle = $('#title').val(),
      myLocation = $('#location').val(),
      myDescription = $('#description').val(),
      myTime = $('#time').val();
    if (myTitle == '' || myDescription == '' || myLocation == '' || myTime == '') {
      $('#title, #location, #description, #time').css('border-color', 'red');

      return false;

    }
  });
});
input {
  border: none;
  padding: 4px 0;
  background: 0 0;
  text-align: left;
  outline: none;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='title' placeholder='Add title'>
<input type='text' id='location' placeholder='Add location'>
<input type='text' id='description' placeholder='Add description'>
<input type='time' id='time'>
<button id='submit'>submit</button>

Upvotes: 0

Views: 37

Answers (1)

SilverSurfer
SilverSurfer

Reputation: 4366

Simply use each function over the inputs and check if is impty:

$(function() {
    $('#submit').on('click', function() {
        $("input").each(function() {
            if ($(this).val() == "") {
                $(this).css('border-color', 'red');
            }
            else $(this).css('border-color', 'green');
        });
       return false;
    });
});
input {
  border: none;
  padding: 4px 0;
  background: 0 0;
  text-align: left;
  outline: none;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='title' placeholder='Add title'>
<input type='text' id='location' placeholder='Add location'>
<input type='text' id='description' placeholder='Add description'>
<input type='time' id='time'>
<button id='submit'>submit</button>

Upvotes: 2

Related Questions