Check if inputs are empty using jQuery before submitting

Question

I have a form that I would like all fields to be filled in. If a field is clicked into and then not filled out, I would like to display the bootstrap has warning class.

Here is my code:

$('#registration-form input').blur(function()
{
    if( !$(this).val() ) {
        $(this).parents('li').addClass('has-warning');
    }
});

What am I doing wrong?

Here is jsfiddle http://jsfiddle.net/f7gsgy93/

@Ionica it is to apply the bootstrap has warning class which gives the input a red boarder — , Jan 27 '15 at 20:05
Possible duplicate of [Check if inputs are empty using jQuery](http://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery) — Marcelo Zárate, Feb 05 '16 at 15:41
Possible duplicate of http://stackoverflow.com/questions/17865148/using-jquery-to-prevent-form-submission-when-input-fields-are-empty/39609587#39609587 — Elnaz, Sep 21 '16 at 07:07

Ionică Bizău · Answer 1 · 2015-01-27T20:14:43.933

You have to catch the submit event on the form. If the input is invalid, then prevent the default behavior.

$("form").on("submit", function () {
    var isInvalid = false;
    $("input", this).each(function () {
        if (!$(this).val()) {
            isInvalid = true;
        }
    });
    if (isInvalid) {
        return false;
    }
});

If you only need to catch the blur event then, just do it!

$(document).ready(function() {
  var $error = $(".alert-danger");
  $("form input").on("blur", function() {
    if (!$(this).val()) {
      $error.removeClass("hide").text("No value");
    } else {
      $error.addClass("hide");
    }
  });
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form action="">
    <input type="text" class="form-control" placeholder="Text input">
    <div class="errors">
      <div class="alert alert-danger hide"></div>
    </div>
  </form>
</div>

I don't want to submit. If i click into a text field, and then if you click out it will validate if it is blank or not — , Jan 27 '15 at 20:08
@CamSonaris See the edit. Note you have to make sure that the elements exist on the page when you add the even listener. — Ionică Bizău, Jan 27 '15 at 20:16

score 0 · Accepted Answer · answered Jan 27 '15 at 20:07

0

$('#registration-form input').blur(function() {

    if ($(this).val() == '') {

        $(this).parents('li').addClass('has-warning');

    }

});

answered Jan 27 '15 at 20:07

Waxi

1,641
2
14
20

This doesn't make sense since `!""` is `true`. – Ionică Bizău Jan 27 '15 at 20:08
What doesn't make sense about it? If the value of the active input is empty then it will apply the class. – Waxi Jan 27 '15 at 20:09
this doesnt work either. in the debugger it seems that it never hits the if statement – Jan 27 '15 at 20:11
Post the relevant HTML and make sure jQuery is included, cause that should have worked if the selector was correct. – Waxi Jan 27 '15 at 20:13

Check if inputs are empty using jQuery before submitting

2 Answers2