Question

我有一个选择框，没有选择在div中生成多个文本框。现在有三个字段

display_name[], user_name[], and user_password[]

代码是：

<select name="license" id="dropdown" class="form-control" required="required">                                                 
  <option  value="default" >Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
        $("#dropdown").change(function() {
            var selVal = $(this).val();
            $("#pttuserdiv").html('');
            if(selVal > 0) {
                for(var i = 1; i<= selVal; i++) {
                    $("#pttuserdiv").append(`
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Display Name</label>
                            <input type="text" class="form-control" name="display_name[]" required >
                        </div>
                    </div>
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Username</label>
                            <input type="text" class="form-control validateLocation"  name="user_name[]" id="user_name" required >
                        </div>
                    </div> 
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Password</label>
                            <input type="password" class="form-control" name="user_password[]" required >
                        </div>
                    </div>`);
                }
            }
        });
    });
</script>

<div class="row">
<div id="pttuserdiv">

</div>
</div>

现在我希望user_name []字段是唯一的。

我该怎么做？如果用户在user_name []中再次输入相同的用户名，我想显示错误或警告。

Answer 1

尝试以下方法

绑定 keyup事件，并检查用户input的当前输入框。
检查 当前输入值是否与其他用户名值相同
如果是，则突出显示输入框。

<强>演示

＆＃13;

$(document).ready(function() {
  $("#dropdown").change(function() {
    var selVal = $(this).val();
    $("#pttuserdiv").html('');
    if (selVal > 0) {
      for (var i = 1; i <= selVal; i++) {
        $("#pttuserdiv").append('<div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Display Name</label><input type="text" class="form-control" name="display_name[]" required ></div></div><div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Username</label><input type="text" class="form-control validateLocation"  name="user_name[]" id="user_name" required ></div></div> <div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Password</label><input type="password" class="form-control" name="user_password[]" required ></div></div>');
      }
      $( "[name='user_name[]']" ).off( "keyup" );
      $( "[name='user_name[]']" ).on( "keyup", function(){
          var isFound = false;
          var value = $(this).val();
          $( "[name='user_name[]']" ).not(this).each( function(){
               if ( this.value == value )
               {
                   isFound = true;
               }
          });
          $(this).toggleClass( "highlight", isFound );
      });
    }
  });
});

＆＃13;

.highlight
{
   border-color : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="license" id="dropdown" class="form-control" required="required">                                                 
  <option  value="default" >Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script type="text/javascript">
</script>

<div class="row">
  <div id="pttuserdiv">

  </div>
</div>

＆＃13;

注意 - ID 在我的代码中没有扮演任何角色，但作为一种良好做法，请保持所有元素的ID唯一。

使用jquery检查div中的所有值是否唯一

1 个答案: