JavaScript-如何在文本框的右侧放置星号？

Question

I want to place asterisk in the right side of the each text box individually when I am submitting the empty form/field. 提交空白表格/字段时，我想在每个文本框的右侧分别放置星号。 The code is working but asterisk is displaying in the end of the form. 该代码正在运行，但星号显示在表格的末尾。

This is my code: 这是我的代码：

[<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap  { width:400px; height:200px; margin:20px; padding:10px;  }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>

<body>

<div id="wrap">
  <form id="regform" name="registerationform" method="POST">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">
      <tr>
        <td>First Name: </td>
        <td class="cntr">
        <input type="text" name="fnametxt" size="20"></td>
      </tr>
      <tr>
        <td>Second Name: </td>
        <td class="cntr">
        <input type="text" name="snametxt" size="20"> </td>
      </tr>
      <tr>
        <td>User Name:</td>
        <td class="cntr">
        <input type="text" name="unametxt" size="20"> </td>
      </tr>
      <tr>
        <td>Email Address: </td>
        <td class="cntr">
        <input type="text" name="emailtxt" size="20"> </td>
      </tr>
      <tr>
        <td>Password : </td>
        <td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
      </tr>
      <tr>
        <td>Confirm : </td>
        <td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
      </tr>
    </table>
    <input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
  </form>
  <div id="une" class="a13B">
  </div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
 // gather object ref to input boxes
  var allInputs=document.getElementById("regform").getElementsByTagName("input");
 // check if value of box is "" 
  for(var i=0;i<allInputs.length;i++)
    { if(allInputs\[i\].name !="reg")    // ignore submit button
       { if(allInputs\[i\].value=="")
         { uneObj.innerHTML=msg\[i\];
           if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }   
           allInputs\[i\].style.border="2px solid #F00"; 
           currentBrdObj=allInputs\[i\];
           allInputs\[i\].onclick=function(){ this.style.border="2px solid #CCC"; }
           return;
     } } }         
// check if password and confirm are the same      
  if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
   { uneObj.innerHTML = msg\[msg.length-1\];       // last msg in array
     formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
     formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
     return;
    }
// all ok so submit form
 uneObj.innerHTML = "All ok so submitting form";
  formObj.submit(); 
}
// -----
 var msg =\["*","*",
          "*","*",
          "*","*"\];
     msg\[msg.length\]="Passwords must be equal.<br>Please type a password";

      //     
        </script>

</body>

</html>][1]

@PawanKumar Here is your code: @PawanKumar这是您的代码：

   <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('#submitBtn').on('click', function(e) {
    debugger;
    e.preventDefault();
    var fields = document.getElementsByTagName('input');
    for (var i = 0; i < fields.length; i++) {
      if (fields[i].hasAttribute('required')) {
        if (fields[i].value == "") {
          fields[i].classList.add('redBorder');
          $(fields[i]).after('*');
        } else {
          fields[i].classList.remove('redBorder');
        }
      }
    }
  });
});

</script>


<style>

.redBorder {
  border: 2px solid red;
  border-radius: 2px;
}

</style>



</head>

<form novalidate>
<input type="text" placeholder="first name" required/><br/><br/>
<input type="text" placeholder="last name" /><br/><br/>
<button id="submitBtn" value="Submit">Submit</button>
</form>


</html>

Answer 1

Use span element to display asterisk at the end of text box. 使用span元素在文本框的末尾显示星号。 Try this : 尝试这个：

 <input type="text" id="name"/> <span style="color:red"> * </span>

Hope this solves your requirement. 希望这能解决您的要求。

Answer 2

Why bother with all that mess? 为什么要打扰所有这些混乱呢？

<input type="text" name="fnametxt" required />*
<input type="email" name="emailtxt" required />*
<input type="submit" value="Register" />

JavaScript required: none at all 需要JavaScript：完全没有

Answer 3

With the help of jquery after() method, you can achieve this. 借助jquery after()方法，您可以实现此目的。

$(fields[i]).after("<span class='redColor'>*</span>");

I have also added code to show red border for required input field. 我还添加了代码以显示必填input字段的红色边框 。

Note : If you use <form> tag, then HTML5 will automatically does the validation and your script will not execute, so to prevent that use novalidate attribute in the form tag or just remove the form tag. 注意：如果使用<form>标记，则HTML5将自动执行验证，并且脚本将不会执行，因此要防止在form标记中使用novalidate属性或仅删除form标记。

 $(document).ready(function() { $('#submitBtn').on('click', function(e) { e.preventDefault(); var fields = document.getElementsByTagName('input'); for (var i = 0; i < fields.length; i++) { if (fields[i].hasAttribute('required')) { if (fields[i].value == "") { fields[i].classList.add('redBorder'); $(fields[i]).after("<span class='redColor'>*</span>"); } else { fields[i].classList.remove('redBorder'); } } } }); });

 .redBorder { border: 2px solid red; border-radius: 2px; } .redColor{ color:red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form novalidate> <input type="text" placeholder="first name" required/><br/><br/> <input type="text" placeholder="last name" /><br/><br/> <button id="submitBtn" value="Submit">Submit</button> </form>

JavaScript-如何在文本框的右侧放置星号？

问题描述

3 个解决方案

解决方案1
2 2017-07-08 11:40:40

解决方案2
1 2017-07-08 10:09:17

解决方案3
0 已采纳 2017-07-08 12:41:45

JavaScript-如何在文本框的右侧放置星号？

问题描述

3 个解决方案

解决方案1 2 2017-07-08 11:40:40

解决方案2 1 2017-07-08 10:09:17

解决方案3 0 已采纳 2017-07-08 12:41:45

解决方案1
2 2017-07-08 11:40:40

解决方案2
1 2017-07-08 10:09:17

解决方案3
0 已采纳 2017-07-08 12:41:45