Моя форма сделана с использованием стилей «начальной загрузки». Чтобы проверить поля ввода, я использую проверку «jquery». Метка с именем находится сверху ввода, когда вы нажимаете на ввод, «метка» перемещается над «вводом». Когда вы нажимаете «Далее», в верхней части «метки» с названием появляется ошибка «проверки», которая должна находиться под «входом». Как исправить так, чтобы «метка» перемещалась выше «входа», а ошибка была ниже «ввода»? мой код
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</script>
<style type="text/css">
#step2,#step3,#step4,#step5{
display: none;
}
.form-group label
{
position: absolute;
top: 3px;
pointer-events: none;
left: 20px;
transition: .5s;
}
.container .form-group input:focus ~label,
.container .form-group input:valid ~label
{
left: 20px;
top: -20px;
color: rgb(66,133,244);
font-size: 12px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(e){
$.validator.addMethod("minlenghtname", function (value, element) {
return /^[a-z]+$/i.test(value);
}," does not match the format");
$.validator.addMethod("requiredname", function (value, element) {
return value.length > 2;
}," fill this field");
var v = $("#commentForm").validate({
rules: {
fname: {
requiredname: true,
minlenghtname: true
},
lname: {
requiredname: true,
minlenghtname: true
}
},
submitHandler: function() {
alert("Submitted, thanks!");
}
})
$(".next1").click(function() {
if (v.form()) {
$("#step2").show();
$("#step1").hide();
$("#progressText").html("Step 2 of 4");
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="progressText" style="margin-bottom:20px;">Step 1 of 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<div id="step1">
<div class="row">
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="fname" name="fname" required="">
<label>First Name:</label>
</div>
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="lname" name="lname" required="">
<label>Last Name:</label>
</div>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
</p>
</div>
</div>
<div id="step2">
Next
</div>
</form>
</div>
</body>
</html>