Question

当我提交空表单/字段时，我想单独在每个文本框的右侧放置星号。代码正在运行，但星号显示在表单的末尾。

这是我的代码：

[<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 这是你的代码：

   <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

使用span元素在文本框末尾显示星号。试试这个：

＆＃13;

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

＆＃13;

希望这能解决您的要求。

Answer 2

为什么要烦恼所有这些混乱？

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

需要JavaScript： none

Answer 3

借助jquery after()方法，您可以实现此目的。

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

我还添加了代码，以显示所需input字段的红色边框。

注意：如果您使用<form>标记，则HTML5会自动执行验证，您的脚本将无法执行，因此要防止使用 novalidate < / {1>}标记中的/ strong>属性，或者只删除form标记。

＆＃13;
＆＃13;
form
＆＃13;
$(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'); } } } }); });
＆＃13;
.redBorder { border: 2px solid red; border-radius: 2px; } .redColor{ color:red; }
＆＃13;
＆＃13;
＆＃13;

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

3 个答案: