Using jQuery and HTML

When user clicks on button, I just want to put red border if value is empty. Otherwise do not put border.

Issue: first when you click on a button it works fine, but than if you enter a value, and hit button, than red border should be removed

$('.mybutton').click(function() {
  if ($(".input").val().trim() == '')
    $(".input").css('border-color', 'red');
  else
    $(".input").css('border-color', '');
});

<script src=".2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

Using jQuery and HTML

When user clicks on button, I just want to put red border if value is empty. Otherwise do not put border.

Issue: first when you click on a button it works fine, but than if you enter a value, and hit button, than red border should be removed

$('.mybutton').click(function() {
  if ($(".input").val().trim() == '')
    $(".input").css('border-color', 'red');
  else
    $(".input").css('border-color', '');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

• javascript
• jquery

Share Improve this question Follow edited Feb 18, 2018 at 9:16 Ikhlak S. 9,0441111 gold badges5959 silver badges7979 bronze badges asked Feb 18, 2018 at 8:57 user9207271user9207271

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Since you have more than one .input class, you have to iterate through them and check whether each input has some value or not.

JSFiddle can works the way you expected.

$(function () {
  $('.mybutton').click(function () {

    $(".input").each(function () {

      if ($(this).val().trim() == '')
        $(this).css('border-color', 'red');
      else
        $(this).css('border-color', '');
    });
  });
});

1. Loop each input after every click
2. Use .addClass() and .removeClass()
3. use this context to refer to current input to be evaluated if needed to add class or remove class

$('.mybutton').click(function() {
  $(".input").each(function() {
    if ($(this).val().trim() == '')
      $(this).addClass('border');
    else
      $(this).removeClass('border');

  })


});

.border {
  border-color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

You're currently selecting all inputs with your selector .input. When you do this and access the value it would return the value of the first selected element. (You'll notice that the highlighting works based on the value of the first input).

What you should instead do is iterate through the matched elements using .each and check the value/set style using this.

e.g.

$('.mybutton').click(function() {
  $(".input").each(function() {
    if (this.value.trim().length === 0)
      $(this).css('border-color', 'red');
    else
      $(this).css('border-color', '');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

You should also have a look at the required attribute which is a much simpler way of displaying required fields.

You need to add an event handler for the input.

    $('.input').on("input", function () {
         if ($(".input").val().trim() == '')
             $(".input").css('border-color', 'red');
        else
             $(".input").css('border-color', '');
    });

You could go one step further and put this in a function. Something like this

<script>
function validateInput() {
    if ($(".input").val().trim() == '')
        $(".input").css('border-color', 'red');
    else
        $(".input").css('border-color', '');
}

$(function () {
    // The JQuery "on" function is generally preferred for 
    // attaching event handlers
    $('.mybutton').on("click" ,validateInput);
    $('.input').on("input", validateInput);
});
</script>