Adding css to input fields using jquery

Question

I am creating a form with error messages,When I submit a form with no values it should add icon and change the box color. But I am unable to get error message to the surname field and I am trying to add icon inside the input field using css, couldn't move it inside the text field.

Somebody help me.

$(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 == "[email protected]" && 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>
‌

Here is my complete code https://jsfiddle.net/hq9tp7ef/

Super User · Accepted Answer · 2017-01-15 10:49:21Z

1

There is some syntax error, just update your js with following code in validate function you have put inputData : "sname" instead of id : "sname"

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

for setting up your icon position, just replace your icon css with following css:

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

edited Jan 15, 2017 at 10:49

answered Jan 15, 2017 at 9:50

Super User

9,6623 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding css to input fields using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related