0

我有一个看起来像这样的表格

<form  data-toggle="validator" role="form" method="post" >
  <input type="text" id="first_name" name="first_name" required >
  <input id="rec_skill" name="tags-4" type="text" required>
  <select class="profile-select" name="industry" id="industry" required>
    <option value="">INDUSTRY </option>
       <?php foreach($industry as $indus): ?>
      <option value="<?php echo $indus->industry; ?>" >
        <?php echo $indus->industry; ?>
      </option>
       <?php endforeach; ?>
  </select>
  <input id="skills" name="skills" type="text" value=""  class="form-control" required>
  <button type="submit" class="btn btn-primary psbtn-bg" id="submit_profile" >SUBMIT</button>
</form>

如果输入字段为空，则单击提交按钮时，它会像这样突出显示

在此处输入图像描述

和这部分相关的代码是

if(rec_skill=="" || rec_skill==null)
  {
    $(".tagsinput").css("border", " 1px solid #B94A48");
  }
else
  {
    $(".tagsinput").css("border", "1px solid #ccc");
  }

if(skills!='')
  {
    $(".tagsinput").css("border", "1px solid #ccc");
  }
else
  {
    $(".tagsinput").css("border", " 1px solid #B94A48");
  }

现在，如果用户在这些输入字段中填写任何值，则突出显示的颜色将被删除。它适用于普通输入字段，但不适用于

 <input id="rec_skill" name="tags-4" type="text" required>

和

 <input id="skills" name="skills" type="text" value=""  class="form-control"
 required>

上面提到的 2 个输入字段是使用此插件创建的，并且在此插件下使用“具有自动完成功能的标签输入”

现在，如果用户填写这两个输入值，突出显示的颜色不会消失。我用来创建这个功能的代码是

$("#rec_skill").change(function() 
  {
    if ($(this).val() == "") 
      {
        $(".tagsinput").css("border", " 1px solid #B94A48");
      }
    else
      {
        $(".tagsinput").css("border", "1px solid #ccc");
      }
  });

$("#skills").change(function() 
  {
    if ($(this).val() == "") 
      {
        $(".tagsinput").css("border", " 1px solid #B94A48");
      }
    else
      {
        $(".tagsinput").css("border", "1px solid #ccc");
      }
  });

如果用户已插入或选择了值，任何人都可以建议如何删除突出显示的颜色

4

1 回答 1

0

你的 jQuery 不正确。首先，您input有 ID rec_skills，skills因此要使用 Id 调用元素，您应该使用$(#idname)not $(.idname)。.taginput其次，您的代码中不存在带有类名的元素。请查看片段以供参考。

编辑：focusout在这种情况下使用它来检查用户是否跳过输入字段而不输入任何值也更好。

$("#rec_skill").focusout(function() 
  {
    if ($(this).val() === "") 
      {
        $(this).css("border", " 1px solid #B94A48");
      }
    else
      {
        $(this).css("border", "1px solid #ccc");
      }
  });

$("#skills").focusout(function() 
  {
    if ($(this).val() === "") 
      {
        $(this).css("border", " 1px solid #B94A48");
      }
    else
      {
        $(this).css("border", "1px solid #ccc");
      }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<input id="rec_skill" name="tags-4" type="text" required> 


<input id="skills" name="skills" type="text" value=""  class="form-control"
 required>

希望这有帮助

于 2018-03-13T05:47:01.497 回答