admin 管理员组

文章数量: 1086019

I have an form, like this

<form>
    <input type="text" id="abc" name="abc" value="abc"><img src="right.png">
    <input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
    <input type="submit" id="submit" value="submit">
</form>

I have an form, like this

<form>
    <input type="text" id="abc" name="abc" value="abc"><img src="right.png">
    <input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
    <input type="submit" id="submit" value="submit">
</form>

but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">

  • javascript
  • html
Share Improve this question edited Oct 5, 2022 at 13:48 Donald Duck is with Ukraine 8,91223 gold badges79 silver badges102 bronze badges asked Jan 15, 2016 at 19:40 Shuvo ShuvoShuvo Shuvo 3292 silver badges15 bronze badges 4
  • 1 Are you planning to use JQuery? – divy3993 Commented Jan 15, 2016 at 19:41
  • 1 Anything, that shows the different result, based on input, if it is empty then show wrong, else show right – Shuvo Shuvo Commented Jan 15, 2016 at 19:42
  • 1 Also any elements can not have same id's. In your case both input elements have same id="abc". – divy3993 Commented Jan 15, 2016 at 19:46
  • 1 it was a mistake, and i lost the javacript code (for another topic related with this).and I do not have any code for this – Shuvo Shuvo Commented Jan 15, 2016 at 19:58
Add a ment  | 

4 Answers 4

Reset to default 7

Mark your input required and add some CSS, like this:

    input:required:valid::after{
        content: url(path/to/right.png);
    }
    input:required:invalid::after{
        content: url(path/to/wrong.png);
    }
    <input type="text" required="required" minlength="1">

Fall back on @divy3993's if you have to support some horrible old browser

I would go with @dtanders but still a simple solution with JavaScript would not harm you.

function myFunction() {
    var x = document.getElementById("abc");
    var curVal = x.value;
    var imageRW = document.getElementById('img_right_wrong');
    if (curVal == "")
    {
 			//wrong.png   
      imageRW.src = "http://findicons./files/icons/1671/simplicio/128/notification_error.png";
    }
    else
    {
 			//right.png
      imageRW.src = "https://d3n7l4wl5znnup.cloudfront/assets/images/icon-right.png";
    }
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons./files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>

Update:

Working Fiddle

Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:

function checkInput() {
  if ($("#abc").val().length == 0) {
    // change image
  }
}
<input id="abc" name="abc" onchange="checkInput()">

But using jQuery plugin is better: link (EDIT: this link is dead, but it can be found on the Wayback Machine)

This can be done easily in angularjs using ng-show.

<!DOCTYPE HTML>
<HTML>
  <head>
    <title>Chat Application</title>
    <script src="./scripts/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">                  
  </head>
  <body ng-app="chatApp">
    <div>
      <input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
      <br />
      <img src="right.png"  alt="right" ng-show="text.length >0">
      <img src="wrong.png" alt="wrong" ng-show="text.length === 0">
      <input type="submit" id="submit" value="submit">
    </div>
      
    <script src="./scripts/app.js"></script>
  </body>
</html>

本文标签： javascriptif input is empty then show a picture or anotherStack Overflow

版权声明：本文标题：javascript - if input is empty then show a picture, or another - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744054165a2525560.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。