Показать сообщение отдельно
  #3 (permalink)  
Старый 30.01.2020, 10:56
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 138

Спасибо за помощь, а как проверить поля не только на цифры, а допустим на имя или email. Вот что у меня получилось, но я думаю это не совсем правильно.
<!DOCTYPE html>
<html>
<head><title>Test</title>
<style type="text/css">
.err{
  border-bottom: 2px solid #F90A0A;
}
.ok{
  border-bottom: 2px solid #34F458;
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(e){
/***************************************************/
//Проверка на число
/***************************************************/
$("form").on("input", "table .age", function() {
var error_message = "Только цифры";
var pattern = /^\d+$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})
/***************************************************/
//Проверка на буквы
/***************************************************/
$("form").on("input", "table .name", function() {
var error_message = "Только буквы";
var pattern = /^[a-zA-Zа-яА-Я]*$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})
/***************************************************/
//Проверка на email адрес
/***************************************************/
$("form").on("input", "table .email", function() {
var error_message = "Только email";
var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var num = this.value.trim();
var ok = pattern.test(num);
$(this).removeClass("ok err");
if(num) {
$(this).addClass(ok ? "ok" : "err");
}
var index = $("form table input").index(this);

$("form table .error_form").eq(index).html(ok || !num ? "" : error_message);
})

   });
</script>
</head>
<body>
<form method="POST" action="form.php">

<table border="0">
  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>

  <tr>
    <td><input class="age" type="text" value="" name="mass[age][]"></td>
    <td><input class="name" type="text" value="" name="mass[exp][]"></td>
    <td><input class="email" type="text" value="" name="mass[gender][]"></td>
  </tr>
  <tr>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
    <td><span class="error_form" ></span></td>
  </tr>
<br>
</table>
  <input type="submit" value="Отправить">
</form>
 </body>
 </html>
Ответить с цитированием