Блог

Главная - Вопросы по программированию - Проверка ввода с помощью баннера и цвета текстового поля

Проверка ввода с помощью баннера и цвета текстового поля

#javascript #jquery #html #drop-down-menu

#javascript #jquery #HTML #выпадающее меню

Вопрос:

У меня есть эти текстовое поле и поле выбора, которые мне нужно проверить, есть ли ввод или его нет при нажатии кнопки. Мне нужно было, чтобы пустое текстовое поле было красного цвета, как и в моем раскрывающемся списке выбора. И как при вводе входных данных может исчезнуть красная цветовая метка? Пожалуйста, помогите

 $(document).ready(function() {

  $('#add').on('click', function() {
    bootstrap_alert('PLEASE FILL IN VALUES');
  });
  bootstrap_alert = function(message) {
    var uname = $("#uname").val();
    var age = $("#age").val();
    var sex = $("#sex").val();

    if (uname.length == 0 || age.length == 0 || sex.index == 0) {
      $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">amp;times;</button><span>'   message   '</span></div>')
      $("#uname").css({
        "background-color": "#ff3300"
      });
      $("#age").css({
        "background-color": "#ff3300"
      });
      $("#sex").css({
        "background-color": "#ff3300"
      });
    } else {
      $('#alert_placeholder').html('');
    }
  }
});  
 <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>

<div id="alert_placeholder"></div>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" /> Sex:
<select id="sex" name="sex" />
<option value="" selected="selected"> Please Select </option>
<option value="Male"> Male </option>
<option value="Female"> Female </option>
</select>
<input type="button" id="add" value="Add">

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

1. установите цвет фона на пустую строку .

2. Все еще не работает

Ответ №1:

Вот рабочая демонстрация с использованием метода jquery on() 

 $(document).ready(function() {

  $("#uname, #age, #sex").on('input', function() {
    let $this = $(this);
    if ($this.val().trim()) {
      $(this).removeClass('input-invalid');
    } else {
      $(this).addClass('input-invalid');
    }
  });

  $('#add').on('click', function() {
    bootstrap_alert('PLEASE FILL IN VALUES');
  });
  bootstrap_alert = function(message) {
    var uname = $("#uname").val();
    var age = $("#age").val();
    var sex = $("#sex").val();

    if (uname.length == 0 || age.length == 0 || sex.length == 0) {
      $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">amp;times;</button><span>'   message   '</span></div>')

      if (uname.length == 0) $("#uname").addClass('input-invalid');
      if (age.length == 0) $("#age").addClass('input-invalid');
      if (sex.length == 0) $("#sex").addClass('input-invalid');
    } else {
      $('#alert_placeholder').html('');
    }
  }
});  
 .input-invalid {
  background-color: #f2dede;
}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>

<div id="alert_placeholder"></div>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" /> Sex:
<select id="sex" name="sex" />
<option value="" selected="selected"> Please Select </option>
<option value="Male"> Male </option>
<option value="Female"> Female </option>
</select>
<input type="button" id="add" value="Add">

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

1. Когда я ввожу значение перед нажатием кнопки, текстовое поле / список выбора не должны становиться красными

2. @BlueMinnie не могу получить u

3. если в текстовом поле уже есть значение, оно не должно превратиться в красную кнопку нажатия upn

4. Последний вопрос, что, если после нажатия кнопки есть ввод, а затем пользователь решает стереть его, есть ли способ, которым он может снова стать красным?

5. @BlueMinnie В любом случае, вы не упомянули, о чем идет речь, проверьте обновление

Ответ №2:

Измените цвет ввода на белый при вводе события и цвет поля выбора при нажатии

 $(document).ready(function() {
$('#uname').keyup(function(){
$('#uname').css({
        "background-color": "white"
      });
})
$('#age').keyup(function(){
$('#age').css({
        "background-color": "white"
      });
})
$('#sex').click(function(){
$('#sex').css({
        "background-color": "white"
      });
})

  $('#add').on('click', function() {
    bootstrap_alert('PLEASE FILL IN VALUES');
  });
  bootstrap_alert = function(message) {
    var uname = $("#uname").val();
    var age = $("#age").val();
    var sex = $("#sex").val();

    if (uname == '')
    {
     $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">amp;times;</button><span>'   message   '</span></div>')
     $("#uname").css({
        "background-color": "#ff3300"
      });
      
    }
    else {
      $('#alert_placeholder').html('');
    }
    if( age=='')
    {
     $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">amp;times;</button><span>'   message   '</span></div>')
      $("#age").css({
        "background-color": "#ff3300"
      });
    }
    else {
      $('#alert_placeholder').html('');
    }
    if(sex.index==0){
      $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">amp;times;</button><span>'   message   '</span></div>')
     
      $("#sex").css({
        "background-color": "#ff3300"
      });
    } else {
      $('#alert_placeholder').html('');
    }
  }
});  
 <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>

<div id="alert_placeholder"></div>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" /> Sex:
<select id="sex" name="sex" />
<option value="" selected="selected">Please Select</option>
<option value="Male"> Male </option>
<option value="Female"> Female </option>
</select>
<input type="button" id="add" value="Add">

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

1. Текстовое поле не должно становиться красным, если есть ввод