个人中心
gpt4 book ai didi

javascript - 使用 jquery 将 css 添加到输入字段

转载 作者：可可西里 更新时间：2023-11-01 13:46:34 24 4
gpt4 key购买 nike

我正在创建一个带有错误消息的表单，当我提交一个没有值的表单时，它应该添加图标并更改框颜色。但是我无法在姓氏字段中收到错误消息，并且我正在尝试使用 css 在输入字段中添加图标，但无法将其移动到文本字段中。

有人帮帮我。

$(function() {
  $('[data-toggle="popover"]').popover()
  $(".fa").hide();
});

function validate() {
  var errorFlag = true;
  var firstName = $('#fname').val();
  var surName = $('#sname').val();
  var mobileNumber = $('#mobNum').val();
  var reEnterMobileNumber = $('#reEnterMobNum').val();
  //var emailid=$('#mail').val();
  var password = $('#password').val();

  var firstNameReg = /^([a-zA-Z]{2,30})$/;
  var surNameReg = /^([a-zA-Z]{2,30})$/;
  var numericReg = /^\d{3}\d{3}\d{4}$/;
  // var emailReg = /^([\w-\.]+@([\w-]+)+(\.[\w-]{2,4})?)$/;
  var passReg = /^([a-zA-Z0-9]{2,30})$/;

  var inputData = [{
    id: "fname",
    regex: firstNameReg
  }, {
    inputData: "sname",
    regex: surNameReg
  }, {
    id: "mobNum",
    regex: numericReg
  }, {
    id: "password",
    regex: passReg
  }];

  for (var index = 0; index < inputData.length; index++) {
    var data = inputData[index];
    var regex = data.regex;
    if (!regex.test($('#' + data.id).val())) {
      errorFlag = false;
      $('#' + data.id).addClass('boxBorder');
      $(".fa").show();
    } else {
      $('#' + data.id).removeClass('boxBorder');
      $(".fa").hide();
    }
  }
  return errorFlag;
}

function userLogin() {
  var a = $('#uname').val();
  var b = $('#userPwd').val();
  if (a == "sindhu@gmail.com" && b == "sindhu") {
    alert("entered successfully")
  } else {
    alert("enter valid user id and password")
  }
}
.nameField {
  width: 197px !important;
}
.fields {
  height: 38px;
  border-radius: 5px;
  border-color: #bdc7d8;
  width: 398px;
}
input::-webkit-input-placeholder {
  line-height: 3;
  font-size: 18px;
  padding: 8px 10px;
}
.input,
#createAccount {
  margin-top: 10px !important;
}
input {
  border: 1px solid;
  width: 152px;
  margin-top: -1% !important;
  height: 23px;
}
.errspan {
  color: #C6484C;
  font-size: 1.6em !important;
  display: absolute;
  right: 9px !important;
  top: 9px !important;
}
#createAccount {
  font-size: 19px;
  line-height: 126%;
  font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
  padding: 7px 20px;
  text-align: center;
  border: 1px solid #2c5115;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
  background-color: #69a74e;
  margin-bottom: 15px !important;
}
.boxBorder {
  border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

<body id="form">
  <form method="post" name="Form" id="user_form" onsubmit="return validate();">
    <input type="text" class="nameField fields input" name="fname" id="fname" placeholder="Firstname">
    <input type="text" class="nameField fields input" name="sname" id="sname" placeholder="Surname"><i class="fa fa-exclamation-circle errspan"></i>
    <br>
    <input type="text" class="fields input" name="number" id="mobNum" placeholder="Mobile number or email address"><i class="fa fa-exclamation-circle errspan"></i>
    <br>
    <input type="text" class="fields input" name="reNumber" id="reEnterMobNum" placeholder="Re-enter mobile number or email address"><i class="fa fa-exclamation-circle errspan"></i>
    <br>
    <input type="password" class="fields input" name="pwd" id="password" placeholder="New password"><i class="fa fa-exclamation-circle errspan"></i>
    <br>
    <div>
      <button type="submit" id="createAccount">Create an account</button>
    </div>
  </form>
</body>
‌

这是我的完整代码 https://jsfiddle.net/hq9tp7ef/

最佳答案

有一些语法错误，用下面的代码更新你的js在验证函数中，您输入了 inputData : "sname" 而不是 id : "sname"

var inputData = [{
    id : "fname",
    regex : firstNameReg
}, {
    id : "sname",
    regex : surNameReg
}, 
{   id:"mobNum",
    regex: numericReg
},{
    id:"password",
    regex:passReg
}
];

要设置您的图标位置，只需将您的icon css 替换为以下css:

.errspan {
    color: #C6484C;
    font-size: 1.6em !important;
    position: absolute;
    right: 9px !important;
    /* top: 9px !important; */
    margin-top: 12px;
}

关于javascript - 使用 jquery 将 css 添加到输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41659800/

24 4 0
文章推荐： html - 缩小变换使图像模糊
文章推荐： php - 实用程序文件在 php 中？
文章推荐： php - 如何在 .htaccess 或 php 文件中设置变量 'allow_url_fopen'？
文章推荐： javascript - 如何检查选择了哪个单选按钮并在 jQuery 中使用 if else 语句应用适当的行为
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com