CODEWITHSUNDEEP
jqueryhtml
user3447137
user3447137

Reputation:

Check inputs with jQuery

In my situation I have problem, I trying to check inputs if they empty it should put "has-error" style, but it does not checking.. What I missing ? 

jQuery(document).ready(function($) {
  jQuery("#submit").click(function() {
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();
    jQuery('#username, #password').removeClass("has_error");
    if (username === '') {
      jQuery('#username').parent().find('input').addClass("has_error");
    } else {
      jQuery('#username').parent().find('input').removeClass("has_error");
    }
    
    if (password === '') {
      jQuery('#password').parent().find('input').addClass("has_error");
    } else {
      jQuery('#password').parent().find('input').removeClass("has_error");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="navigation.html" method="post" id="query-form" class="form-signin">
  <input type="text" name="username" class="form-control" id="username" placeholder="Username">
  <input type="password" name="password" class="form-control" id="password" placeholder="Password">
  <button type="submit" class="btn btn-lg btn-primary btn-block" id="submit">
    Prisijungti
  </button>
</form>

Upvotes: 0

Views: 236

Answers (3)

Samuel Cook
Samuel Cook

Reputation: 16828

This looks correct, but you are trying to apply the class to a parent input, which from the code given doesn't exist. It looks like you should remove all instances of: .parent().find('input')

Also, as noted by showdev if the condition of "being empty" is met, then you need to return false on the form (don't submit)

jQuery(document).ready(function($) {
  jQuery("#submit").click(function() {
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();
    jQuery('#username, #password').removeClass("has_error");
    if (username === '') {
      jQuery('#username').addClass("has_error");
      return false;
    } else {
      jQuery('#username').removeClass("has_error");
    }
    if (password === '') {
      jQuery('#password').addClass("has_error");
      return false;
    } else {
      jQuery('#password').removeClass("has_error");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="navigation.html" method="post" id="query-form" class="form-signin">
  <input type="text" name="username" class="form-control" id="username"     placeholder="Username">
  <input type="password" name="password" class="form-control" id="password" placeholder="Password">
  <button type="submit" class="btn btn-lg btn-primary btn-block" id="submit">
    Prisijungti
  </button>
</form>

Upvotes: 2

Todd
Todd

Reputation: 5454

This could be simplified since you're just checking empty. Note: you could add the required attribute instead. But anyway, check this out.

edit

Demo

$(function() {
    $("#submit").click(function() {
        var $inputs = $(this).siblings('input'),
            isValid = true;
        $inputs.each(function() { 
          var hasError = !$(this)[0].value.length;
          isValid = isValid && !hasError;
          $(this).toggleClass('has_error', hasError);
        });
      
        return isValid;
    });
});

Upvotes: 0

Sean Jermey
Sean Jermey

Reputation: 121

jQuery("#submit").click(function(e) {
    e.preventDefault();
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();

    //rest of code

    $('#query-form').submit(); // once checks complete
});

Upvotes: 0

Related Questions