通过横幅和文本框颜色进行输入验证

Question

我有这些文本框和选择框，我需要在单击按钮时验证是否有输入。我需要空白文本框是红色的，就像在我的选择下拉列表中一样。输入输入后，红色标记怎么会消失？请帮忙

$(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">&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">

Answer 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">&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">

Answer 2

在 keyup 事件时将输入的颜色更改为白色，在单击时将选择框的颜色更改为白色

$(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">&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">&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">&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">