{"issue":{"state":"open","pull_request":{"diff_url":null,"html_url":null,"patch_url":null},"user":{"avatar_url":"https://secure.gravatar.com/avatar/15ae54f30480803f3c90e2a2aed08215?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"15ae54f30480803f3c90e2a2aed08215","url":"https://api.github.com/users/kristofferahl","login":"kristofferahl","id":288937},"milestone":null,"assignee":null,"labels":[],"updated_at":"2011-11-03T22:22:24Z","closed_at":null,"comments":8,"url":"https://api.github.com/repos/jzaefferer/jquery-validation/issues/92","body":"I have two div's inside a form like this:\r\n\r\n```html\r\n<form ...>\r\n<div class=\"column\">\r\n    ... Form elements ...\r\n</div>\r\n<div class=\"column\">\r\n    ... Form elements ...\r\n</div>\r\n</form>\r\n```\r\n\r\nAnd here is the css for the column class:\r\n\r\n```css\r\n.column {float: left; width: 47.5%; margin-right: 2.5%;}\r\n```\r\n\r\nThe first column contains 3 form elements. The first two fields are required and the third is optional but has email address validation. If I load the page, place the marker inside the last field and enter an invalid email address and then click on the submit button, the last field is validated (email) but the first two (required) isn't triggered. If I click the submit button again, validation is triggered as expected (for all 3 fields).\r\n\r\nHere's the strange part though. If I remove the width declaration from the column class and repeat the process, all fields are validated as expected. Why do setting the width effect validation? Is this a know issue? What can I do to fix it?\r\n\r\nIn short, this works ```.column {float: left; margin-right: 2.5%;}``` while this doesn't ```.column {float: left; width: 47.5%; margin-right: 2.5%;} ```.\r\n\r\nI've tested this with the following setup:\r\nFirefox 3.6.13\r\njQuery 1.5.1\r\njQuery validation 1.8.0\r\n\r\nBest regards / Kristoffer","html_url":"https://github.com/jzaefferer/jquery-validation/issues/92","number":92,"title":"Setting the width causes a validation quirk","id":818803,"created_at":"2011-04-27T09:12:24Z"},"action":"created","comment":{"user":{"avatar_url":"https://secure.gravatar.com/avatar/c398d7ced42735a14c0770325254ffa7?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"c398d7ced42735a14c0770325254ffa7","url":"https://api.github.com/users/mvpc","login":"mvpc","id":1096732},"updated_at":"2011-11-03T22:22:24Z","url":"https://api.github.com/repos/jzaefferer/jquery-validation/issues/comments/2624087","body":"So I've finally found someone who was able to crack this problem:)\r\nThe thing is: if there is not enough space for error messages to fit next to form fields (or if we place them in paragraphs or divs instead of labels), as soon as an error message appears it changes the height of the form and hence the position of the Submit button. So when we enter something invalid into a field just before clicking Submit, the field’s onfocusout handler is executed and the error message is shown. The message modifies the form’s height, “shifting” the Submit button down, so by the time we click “Submit” the button is not there any more (it's already lower)!\r\nSo it doesn’t really have anything to do with the plugin itself, and it looks like the only solution is to avoid showing error messages in any way that would change the position of the submit button.\r\n","id":2624087,"created_at":"2011-11-03T22:22:24Z"}}