Блог

Этот вопрос чисто CSS.

Я создаю простую контактную форму HTML с использованием Twitter Bootstrap 3. Контактная форма выглядит великолепно. А для проверки полей формы я использовал плагин Bootstrap Validator. Простой в использовании, простой в интеграции плагин.

http://jsfiddle.net/TLLe2/

Это начальная версия моей формы. При нажатии кнопки отправки без ввода полей появятся сообщения о проверке.

Я просто хотел выделить красным цветом те поля, которые не были введены, поэтому я использовал приведенный ниже код и удалил сообщения проверки из скрипта.

  highlight: function (element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function (element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        }
 

Теперь … новая версия моей формы находится в следующей скрипке.

http://jsfiddle.net/XSf37/

Теперь при нажатии кнопки отправки .. все поля выделяются, а пользовательские сообщения не отображаются. Но метка, которая использовалась для отображения пользовательских сообщений, загружается, даже если сообщений нет.

Например….

для поля имени пользователя,

 <label for="txtusername" class="error"></label>
 

является loaded…so это для любого другого поля..Это нарушает макет моей формы. Есть ли какой-либо способ удалить эти метки или не загружать эти метки????

Заранее спасибо.

Сделайте это в своей функции проверки:

 errorPlacement: function(error,element) {
    return true;
  }
 

Пользовательская функция размещения ошибок (см. Документацию), чтобы остановить создание пустых меток.

СКРИПКА

попробуйте это http://jsfiddle.net/XSf37/3 / удалить тег метки ошибки из html

 <form id="new-user-form" class="form-horizontal" role="form" action=""
    method="post">
    <div class="form-group ">
        <label for="txtusername" class="col-sm-3 control-label">Username*</label>
        <div class="col-sm-7">
            <input id="txtusername" name="txtusername" tabindex="1" type="text"
                class="form-control"> <span id="showusername"
                class="help-block"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="txtfname" class="col-sm-3 control-label">First
            Name*</label>
        <div class="col-sm-7">
            <input id="txtfname" name="txtfname" tabindex="2" type="text"
                class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="txtlname" class="col-sm-3 control-label">Last
            Name*</label>
        <div class="col-sm-7">
            <input id="txtlname" name="txtlname" tabindex="4" type="text"
                class="form-control">
        </div>
    </div>


    <div class="form-group">
        <label for="txtpassword" class="col-sm-3 control-label"">Password*</label>
        <div class="col-sm-7">
            <input id="txtpassword" name="txtpassword" tabindex="5"
                type="password" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="txtrpassword" class="col-sm-3 control-label">Repeat*</label>
        <div class="col-sm-7">
            <input id="txtrpassword" name="txtrpassword" type="password"
                tabindex="6" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="ddlgroup" class="col-sm-3 control-label">Group*</label>
        <div class="col-sm-7">
            <select id="ddlgroup" name="ddlgroup" tabindex="7"
                class="form-control">

                <option value="cxvxcv">value</option>

            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-7">

            <button id="butnid" type="submit" class="btn btn-success">Save
                User</button>
        </div>
    </div>
</form>
 

Попробуйте контролировать длину сообщения об ошибке.

Ошибка размещения: функция (ошибка, элемент) { if(ошибка [0].innerHTML.length> 6){

6 — это потому, что в моих ошибках пустой метки была сущность nbsp