Label positioning

Question

I use Jquery Validate to validate inputs, but when validation fails, an error message label is created next to the input.

My goal is to have this label shown below the input, without changing the position of the inputs next to the validated input, but when I use the CSS property 'display: block', the inputs on the side are pushed down, as if there were a '< br >' between the inputs and the error label generated by the validation.

Following demonstration

Prior to validation: After validation:

The CSS code of the error label is very simple:

label.error {
font: 11px arial;
margin-left: 2px;
display: block; }

If my question is incomplete, please let me know that I will supplement the question as soon as possible.

Answer 1

You can convert this label for position: absolute and position it below the input. However it is necessary that the element where the label is created has position: relative. Include in CSS the code below to set all elements with position: relative:

*{
   position: relative;
}

It is also important that each input is separated from each other within an element (a div or label, for example):

<form>
    <div>
        E-mail <input ...>
    </div>
    <div>
        Telefone <input ...>
    </div>
    <div>
        Telefone adicional <input ...>
    </div>
</form>

And the CSS below will position the label:

label.error{
   position: absolute;
   left: 0;
   top: 23px;
   margin-left: 0;
}

*{
   position: relative;
}

See how it looks:

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$().ready(function() {
		// validate the comment form when it is submitted
		$("#commentForm").validate();

		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				},
				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "Please enter the same password as above"
				},
				email: "Please enter a valid email address",
				agree: "Please accept our policy",
				topic: "Please select at least 2 topics"
			}
		});

		// propose username by combining first- and lastname
		$("#username").focus(function() {
			var firstname = $("#firstname").val();
			var lastname = $("#lastname").val();
			if (firstname && lastname && !this.value) {
				this.value = firstname + "." + lastname;
			}
		});

		//code to hide topic selection, disable for demo
		var newsletter = $("#newsletter");
		// newsletter topics are optional, hide at first
		var inital = newsletter.is(":checked");
		var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
		var topicInputs = topics.find("input").attr("disabled", !inital);
		// show when newsletter is checked
		newsletter.click(function() {
			topics[this.checked ? "removeClass" : "addClass"]("gray");
			topicInputs.attr("disabled", !this.checked);
		});
	});
	</script>
	<style>
	#commentForm {
		width: 500px;
	}
	#commentForm label {
		width: 250px;
	}
	#commentForm label.error, #commentForm input.submit {
		margin-left: 253px;
	}
	#signupForm {
		width: 670px;
	}
	#signupForm label.error {
		margin-left: 10px;
		width: auto;
		display: inline;
	}
	#newsletter_topics label.error {
		display: none;
		margin-left: 103px;
	}
   
   form div{
      display: inline-block;
   }
   
   .submit{
      margin-top: 20px;
   }

label.error{
   position: absolute;
   left: 0;
   top: 23px;
   margin-left: 0;
}

*{
   position: relative;
}

	</style>
</head>
<body>
<div id="main">

	<form class="cmxform" id="signupForm" method="get" action="" style="width: 1000px; display: block;">
		<fieldset>
			<div>
				<label for="firstname">Firstname</label>
				<input id="firstname" name="firstname" type="text">
			</div>
			<div>
				<label for="lastname">Lastname</label>
				<input id="lastname" name="lastname" type="text">
			</div>
			<div>
				<label for="username">Username</label>
				<input id="username" name="username" type="text">
			</div>
			<p>
				<input class="submit" type="submit" value="Submit">
			</p>
		</fieldset>
	</form>
</div>