Question

我用一系列文本字段创建了一个非常基本的html表单。我只是想找到一种方法，如果输入了一些值，就会在字段右侧显示绿色检查。我尝试了一些CSS（不太了解它）无济于事。有任何想法吗？我一直在寻找相当长的一段时间。这是我到目前为止所拥有的。感谢

<!DOCTYPE html>
<html>
    <head>

        <title>CRM Application Form</title>
        <style type="text/css">
            label.valid {
                width: 24px;
                height: 24px;
                background: url(assets/img/valid.png) center center no-repeat;
                display: inline-block;
                text-indent: -9999px;
            }

            label.error {
                font-weight: bold;
                color: red;
                padding: 2px 8px;
                margin-top: 2px;
            }

        </style>
    </head>

    <body>  

            <h1 style="text-align:center">CRM Application Form</h1>
            <form>
                <fieldset style="background-color:lightgray">
                    <legend style="font-weight:600">Personal Information</legend>
                    Date of Birth:
                    <input type="date" id="DOB" name="DOB" required><br>
                    Social Security #:
                    <input type="text" id="SS#" name="SS#" value="" onchange="checkField(this.value)"><br>                    
                    Location:
                    <input type="text" id="Location" name="Location" /><br>
                    Ethnicity:
                    <input type="text" id="Ethnicity" name="Ethnicity" /><br />
                    Citizenship:
                    <input type="radio" id="Yes" name="Yes" value="Yes" />Yes
                    <input type="radio" id="No" name="No" value="No" />No<br />
                    Gender:
                    <input type="text" id="Gender" name="Gender" /><br />
                    Marital Status:
                    <input type="text" id="Marital Status" name="Marital Status" /><br />
                    Previous Last Name:
                    <input type="text" id="PLN" name="PLN" /><br />
                </fieldset>
                <fieldset style="background-color:lightgray">
                    <legend style="font-weight:600">Contact Information</legend>
                    Address:
                    <input type="text" id="Address" name="Address" required><br />
                    Email:
                    <input type="email" id="email" name="email" required><br />
                </fieldset>
                <fieldset style="background-color:lightgray">
                    <legend style="font-weight:600">Education</legend>
                    Education History:
                    <input type="text" id="EH" name="EH" /><br />
                    Academic Level:
                    <input type="text" id="AL" name="AL" /><br />
                </fieldset>
                <fieldset style="background-color:lightgray">
                    <legend style="font-weight:600">Other Information</legend>
                    Military Status:
                    <input type="text" id="MS" name="MS" /><br />
                    POI:
                    <input type="text" id="POI" name="POI" /><br>
                    Employment Goal:
                    <input type="text" id="EG" name="EG" /><br />
                    Program:
                    <input type="text" id="Program" name="Program" /><br />
                    Market Segment:
                    <input type="text" id="Mkt" name="Mkt" /><br />
                    FA:
                    <input type="checkbox" id="FA" name="FA" />
                    Payment:
                    <input type="checkbox" id="Payment" name="Payment" /><br />
                    Notes:<br />
                    <textarea id="Notes" name="Notes"> </textarea><br />
                </fieldset>
                <input type="submit" />

            </form>

</body>

    </html>

Answer 1

在您尝试收听的输入中添加一个类 - 并将绿色复选标记图像放在其右侧，但使用样式=＆＃39; display：none;＆＃39; < / p>

<input type='text' id='tbTest1' class='CheckChange'/>
<img src='CheckMark.jpg' style='display:none;'/>

然后添加一些javascript以在存在值时显示图像 - 如果不存在则隐藏它：

$("#document").ready(function(){
    $(".CheckChange input[type='text']").on("change", function(){
        if ($(this).val().length > 0)
            $(this).next("img").show();
        else
            $(this).next("img").hide();
    });
});

Answer 2

这是动态插入图像的想法。在示例中，我使用了div，但您可以替换所需的元素。

＆＃13;

$(function() {
  $('input').change(function() {
    var $input = $(this),
      $flag = $input.next();

    if (!$input.val()) {
      $flag.remove();
    }
    
    if ($flag.length == 0 || !$flag.is('.valid')) {
      $input.after('<div class="valid"></div>');
    }
  });
});

＆＃13;

.valid {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<input type="text" />
<input type="text" />

＆＃13;

想要一个绿色复选标记出现在文本字段的右侧

2 个答案: