Блог

Главная - Вопросы по программированию - jquery validation multi selectbox

jquery validation multi selectbox

#jquery #validation

#jquery #проверка

Вопрос:

У меня есть форма с несколькими полями выбора. Я использую его отсюда (https://silviomoreto.github.io/bootstrap-select/examples/#custom-button-text ) Я хочу это проверить. все хорошо, и когда я нажимаю на форму отправки, она возвращает мне сообщение о том, что это поле требуется, но цвет границы не меняется на красный.

Комментарии:

1. .has-error .btn-default{ граница: 1 пиксель сплошной красный; } я пробовал это, но это не работает

2. Не могли бы вы предоставить нам код, который вы написали, пожалуйста?

Ответ №1:

я создаю скрипку js и не вижу проблемы. Вы можете проверить эту ссылку https://jsfiddle.net/36zopv3v/2 /

 <form data-toggle="validator" role="form">
  <div class="form-group">
    <label class="control-label">Select</label>
    <select required multiple class="form-control selectpicker">
      <option value="1">item1</option>
      <option value="2">item2</option>
    </select>
  </div>
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
  </div>
  <div class="form-group has-feedback">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <div class="help-block with-errors">Hey look, this one has feedback icons!</div>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="help-block">Minimum of 6 characters</div>
      </div>
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
        <div class="help-block with-errors"></div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="underwear" required> Boxers
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="underwear" required> Briefs
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="terms" data-error="Before you wreck yourself" required> Check yourself
      </label>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Комментарии:

1. спасибо большое @Eren, я нашел свою проблему в вашем примере

2. отлично, если это поможет вам, пожалуйста, оцените и отметьте как правильный ответ

Ответ №2:

 <select required multiple>
  <option value="1">item1</option>
  <option value="2">item2</option>
</select>
<style>
 .has-error .btn-default{border:2px solid red !important}
</style>