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

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

javascript html css

JavaScript-如何在文本框的右侧放置星号？,javascript,html,css,Javascript,Html,Css,当我提交空表单/字段时，我想在每个文本框的右侧分别放置星号。代码正在运行，但星号显示在表单末尾这是我的代码： @帕万库马尔这是您的代码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() {

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

这是我的代码：

@帕万库马尔这是您的代码：

   <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>

为什么要为那些乱七八糟的东西烦恼呢

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

需要JavaScript：完全没有

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

*借助jquery-after方法，您可以实现这一点

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

雷德博德先生{ 边框：2倍纯红；边界半径：2px； } .红颜色{ 颜色：红色； } 提交

你告诉它把*放在uneObj里面，这是你的。。。它位于表单的末尾，您想知道它为什么会出现在表单的末尾？我试图将该div放在文本框后，但它只对第一个文本框起作用。是的，但需要在文本框的末尾显示星号。我尝试过，但现在它在提交后没有显示任何内容。谢谢@Hitesh Sikka。但是我必须在提交空表单后显示它，并且它是预定义的。请您更明确一点好吗？第一：为什么要提交一个空表单？第二：你所说的预定义到底是什么意思？第三：根据你的问题，你已经清楚地提到我在提交空表单/字段时，而不是之后。因此，请首先明确说明具体要求是什么：我不会留下任何空白字段，而是出于安全目的而留在组织中，或者/或者，如果我们想要某人的全部信息，我们会尽量让某人不留下空白字段。第二：预定义的意思是我没有提交，它已经存在了。第三：是的，当我提交时，空表单星号应该在那个时候显示，而不是之前。然后你可以很容易地将整个代码放在一个函数中，该函数应该在单击提交时运行。然后可以从函数本身重定向

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