Hitting submit button with invalid fields doesn't trigger error messages on fields

cheshire137 commented 12 years ago

When I have a validated field in a form and try to submit the form when that field is erroneous, the form doesn't submit (as expected) but the erroneous field remains the same, with no red border or error message (unexpected behavior). When I would edit the field and give it an invalid value, then click elsewhere, the field got a red border and my error message appeared beside it (as expected).

I think I fixed the problem in your validate_field method. I replaced this:

if (jQuery(id).next('.' + options['error_message_class']).length == 0) {
    jQuery(id).after('<span class="' + options['error_message_class'] + '">' + options['message'] + '</span>');
    jQuery(id).parents("div ." + options['error_container_class']).addClass("error")
}

With this:

var field = jQuery(id);
var errMsgHolder = field.next('.' + options['error_message_class']);
if (errMsgHolder.length < 1) {
    field.after('<span class="' + options['error_message_class']
            + '">' + options['message'] + '</span>');
} else {
    errMsgHolder.text(options['message']);
}
field.parents("." + options['error_container_class'])
    .addClass("error");

ddarren commented 12 years ago

Moneypenny, could I see the html for your form as well as the javascript where you call the validate method on the input fields?

cheshire137 commented 12 years ago

I've been using Twitter Bootstrap with my project, so I made a sample that uses it, but I don't think it affects the problem. Here's some sample HTML that reproduces the bug for me:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

        <p>Click Submit without changing either field.  The form will not submit because Name requires a value, but Name is not highlighted / marked as invalid.  Email requires a value and defaults to having one, so it is okay.</p>

        <form action="" method="POST">
            <div class="control-group">
                <label for="name">Name</label>
                <div class="controls">
                    <input type="text" class="span3" id="name" name="name">
                </div>
            </div>
            <div class="control-group">
                <label for="email">Email</label>
                <div class="controls">
                    <input type="text" class="span3" id="email" name="email" value="sample@mail.com">
                </div>
            </div>
            <div class="form-actions">
                <button type="submit">Submit</button>
            </div>
        </form>

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script>
        $(function() {
            $('#name').validate({
                expression: "if (VAL) return true; else return false;",
                message: "name is required"
            });
            $('#email').validate({
                expression: "if (VAL) return true; else return false;",
                message: "email is required"
            });
        });
    </script>

  </body>
</html>

ddarren commented 12 years ago

Ok, thanks Sarah - I see the problem now. You're right the problem was that I was deleting the error messages for all of the controls. I was able to fix it on my end by just deleting those two lines:

jQuery('.' + options['error_message_class']).remove(); jQuery('.' + options['error_container_class']).removeClass('error');

Let me know if works on your end.

Thanks, Darren

ddarren / jQuery-Live-Form-Validation-For-Twitter-Bootstrap

Hitting submit button with invalid fields doesn't trigger error messages on fields #2