Label placement

Question

Label placement

Navigation

#1 by (1 votes)

1

I use JQuery Validate to do input validation, but when validation fails, an error message label is created next to the input.

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

Follow the demo

Before validation: Aftervalidation:

The CSS code for 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.

css css3

asked by anonymous 08.01.2018 / 18:42

1 answer

Load RTF content into HTML component How to move a div with the JQUERY mouse?

score 1 · Accepted Answer

You can convert this label to position: absolute and position it below input . However, the element where 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 label :

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

*{
   position: relative;
}

Here's how:

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="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>