Добавление css в поля ввода с помощью jquery

Я создаю форму с сообщениями об ошибках. Когда я отправляю форму без значений, она должна добавить значок и изменить цвет ящика. Но я не могу получить сообщение об ошибке в поле фамилии, и я пытаюсь добавить значок в поле ввода с помощью css, не смог его перенести в текстовое поле.

Кто-нибудь мне помогает.Добавление css в поля ввода с помощью jquery

$(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-\.][email protected]([\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> 
 
‌

Вот мой полный код https://jsfiddle.net/hq9tp7ef/

источник

2017-01-15 user7397787

Существует некоторая ошибка синтаксиса, просто обновляя свои js с следующий код в функции валидации вы поставили inputData : "sname" вместо id : "sname"

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

для настройки вашего icon position, просто заменить ваш icon css со следующим CSS:

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

источник

2017-01-15 09:50:52

Добавление css в поля ввода с помощью jquery

ответ

Смежные вопросы