Как сделать чтобы после исправления ошибки текст не оставался красным
вот такой код проверки полей.
<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js">
</script>
<link rel="stylesheet" type="text/css" href="new.css" />
</head>
<body>
<div class="container">
<div><div class="texts"> Name </div> <input type="text" name="Name" class="inp" id="text" /> </div>
<div><div class="texts"> Surname </div> <input type="text" name="Surname" class="inp" id="text1"/></div>
<div><div class="texts"> City </div> <input type="text" name="City"class="inp" id="text2"/></div>
<div><div class="texts"> Email </div> <input type="text" name="Email" class="inp" id="text3"/></div>
<div><div class="texts"> Password </div> <input type="password" name="Pass" class="inp" id="text4"/></div>
<div><div class="texts"> Repeat password </div> <input type="password" name="rpt" class="inp" id="text5"/></div>
</div>
<div class="submit">
<input type="button" name="button" value="register" class="button"/>
</div>
<span>
<script>
$(document).ready(function(){
$('.button').click(function(){
var text = $('#text').val();
if( /[^a-z]/.test(text)){
$('#text').after('').css('color','red');}
else {
var text1 = $('#text1').val();
if( /[^a-z]/.test(text1)){
$('#text1').after('').css('color','red');}
else {
var text2 = $('#text2').val();
if( /[^a-z]/.test(text2)){
$("#text2").after('').css('color','red');}
else {
var text3 = $('#text3').val();
var filter = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
if (filter.test(text3)){
$("#text3").after('')}
else {
$("#text3").after('Wrong mail adress')}
};
}
};
});
});
</script>
</body>
</html>
|
Твой код вызывает боль при взгляде на него.
Сделай по-нормальному, иначе, подозреваю, помощи ни от кого не дождешься.. |
$(document).ready(function(){
$('.button').click(function(){
$('.inp').each(function(){
var text = $('#text').val();
if( /[^a-zA-Z]/.test(text)||text.length<=1){
$('#text').css('background-color','#FF7171');
}
else {
$('#text').css('background-color','#C6FFB3');}
});
$('.inp').each(function(){
var text1 = $('#text1').val();
if( /[^a-zA-Z]/.test(text1)||text1.length<=1){
$('#text1').css('background-color','#FF7171');}
else {
$('#text1').css('background-color','white')}
});
$('.inp').each(function(){
var text2 = $('#text2').val();
if( /[^a-zA-Z]/.test(text2)||text2.length<=1){
$('#text2').css('background-color','#FF7171')}
else {
$('#text2').css('background-color','white')}
});
$('.inp').each(function(){
var text3 = $('#text3').val();
var filter = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
if (filter.test(text3)){
$('#text3').css('background-color','white')}
else if(text3.length<=1){
$('#text3').css('background-color','#FF7171')}
else {
$('#text3').css('background-color','#FF7171')}
});
$('.inp').each(function(){
var text5 = $('#text5').val();
var text4 = $('#text4').val();
if (text5.length<=1||text4.length<=1||text5!=text4){
$('#text5').css('background-color','#FF7171')
$('#text4').css('background-color','#FF7171')}
else{
$('#text4').css('background-color','white')
$('#text4').css('background-color','white')}
});
});
});
как-то так? |
Уже не так больно смотреть, но плакать все равно хочется...
|
$('.inp').each(function(){..
$('.inp').each(function(){.. $('.inp').each(function(){.. $('.inp').each(function(){.. $('.inp').each(function(){.. Ты че, с дубу чтоли рухнул? По пять (каждый инпут) раз вызывать каждый фрагмент кода) |
Простой валидатор. Использует атрибуты html5 валидации. Но поддержка html5 браузером не требуется. По идее должно работать в IE9+
В современных браузерах валидация будет работать и без js (кроме проверки пароля).
<!DOCTYPE html>
<style>
input{
border: 1px solid #777;
}
input:focus{
outline: none;
box-shadow: 0 0 5px rgb(179, 179, 179);
}
.state-error{
border-color: red;
}
.state-success{
border-color: green;
}
</style>
<form action="">
<p><input placeholder="Логин" type="text" name="name" required="" pattern="[a-zA-Z]{2,64}" /></p>
<p><input placeholder="E-mail" type="email" name="email" required="" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+" /></p>
<p><input placeholder="Пароль" type="password" name="password" required="" pattern=".{2,64}" /></p>
<p><input placeholder="Пароль еще раз" type="password" name="passwordConfirm" required="" /></p>
<p><button type="submit">Отправить</button></p>
</form>
<script>
function FormValidator(form, rules) {
form.noValidate = true;
form.addEventListener('input', this);
form.addEventListener('submit', this);
this.form = form;
this.rules = rules;
}
FormValidator.prototype = {
constructor: FormValidator,
handleEvent: function(event) {
switch (event.type) {
case 'input':
this.validateInput(event.target);
break;
case 'submit':
if (!this.validateInputs(this.form.elements))
event.preventDefault();
break;
}
},
validateInput: function(input) {
var rule = this.rules[input.name];
var success = this.defaultRule(input);
if (rule)
success = rule(input) && success;
if (success) {
input.setAttribute('aria-invalid', 'false');
input.classList.remove('state-error');
input.classList.add('state-success');
} else {
input.setAttribute('aria-invalid', 'true');
input.classList.remove('state-success');
input.classList.add('state-error');
}
return success;
},
validateInputs: function(inputs) {
var success = true;
for (var i = 0; i < inputs.length; i++) {
success = this.validateInput(inputs[i]) && success;
}
return success;
},
defaultRule: function(input) {
var value = input.value;
var required = input.hasAttribute('required');
var pattern = input.getAttribute('pattern') || '.*';
return value ? new RegExp('^' + pattern + '$').test(value) : !required;
}
};
</script>
<script>
var form = document.querySelector('form');
var validator = new FormValidator(form, {
'passwordConfirm': function(input) {
return input.value == input.form.password.value;
}
});
</script>
|
danik.js,
а так можно или есть какая-то разница ?
validateInputs: function(inputs) {
for (var i = 0; i < inputs.length; i++) {
if (!this.validateInput(inputs[i])) return false;
}
return true;
},
|
рони, тогда не все ошибочные поля подсветятся же.
Ксати, в коде явно не хватает фильтра для инпутов. А то щас и кнопка submit тоже валидируется ) |
Про IE9 я загнул. Нужно подключать либо classList.js либо не использовать в коде classList. Это касается не только IE9 но и других старых не-IE браузеров.
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:01. |