#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я использую регистрационную форму с jquery для проверки этой формы
Моя проблема связана с дизайном после отправки формы, и появляется ошибка, когда диапазон изменяет ее высоту
Я использую bootstrap для своего css
/*validation css*/
@import url('../assets/css/bootstrap.min.css');
@import url('../assets/css/bootstrap-responsive.min.css');
label.valid {width: 24px;height: 24px;background: url(../assets/img/valid.png) center center no-repeat;display: inline-block;text-indent: -9999px;}
label.error {font-weight: bold;color: red;padding: 2px 8px;margin-top: 2px;}
.form-group{
margin-bottom: 15px;
}
label{
margin-bottom: 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #fff;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 500px;
padding: 40px 40px;}
Html-форма
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#" id="registration-form" name="form">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon "><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control label.error" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
Перед отправкой
После отправки
$(document).ready(function(){
$('#registration-form').validate({
rules: {
name: {
required: true,
required: true
},
username: {
minlength: 6,
required: true
},
phone: {
minlength: 8,
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
agree: "required"
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready
Комментарии:
1. Если вы используете плагин проверки jquery, вам необходимо настроить его для начальной загрузки. Короче говоря, элемент error должен быть размещен после элемента input-group
2. @user3599803 вы имеете в виду это выделение: функция (элемент) { $(элемент).ближайший (‘.control-group’).removeClass(‘успех’).addClass(‘ошибка’); }, успех: функция (элемент) { элемент .текст (‘OK!’).addClass(‘valid’) .closest(‘.control-group’).removeClass(‘ошибка’).addClass(‘успех’); } });
Ответ №1:
Обновлено
Вам нужно обернуть ваш скрипт в $(document).ready(function(){...});
Проверьте демонстрацию ЗДЕСЬ
JS:
$(document).ready(function(){
$('#registration-form').validate({
rules: {
name: {
required: true,
required: true
},
username: {
minlength: 6,
required: true
},
phone: {
minlength: 8,
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
agree: "required"
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
});
});
Комментарии:
1. извините, я не могу это изменить, пожалуйста, проверьте выше и скажите, что мне делать
2. @mohamadmohamad проверьте обновленный ответ, надеюсь, он вам поможет
3. я попробовал обновление, которое вы указали выше, но оно не сработало, оно не дало мне никакого сообщения
4. не могли бы вы поместить код здесь codepen.io/jpI/pen/qaxGEk чтобы увидеть, что произойдет
5. Вы можете еще раз проверить, что он работает нормально в обеих демонстрациях. Какую версию jquery вы используете?