Валидация input
Ребята, помогите скрипт написать.
Есть поле с проверкой <input id="email" type="email" name="jform[contact_email]" class="validate required" onkeyup="checkSendBox();" required> <label for="email" data-error="неверно" data-success="правильно">Email <span class="required">*</span></label> </div> Мне нужен скрипт, который отключает активность кнопки, если поле говорит, что нет валидации. Ранее я такой скрипт сделал для проверки полей на длину. Ещё бы добавить валидность email. Сам я что-то пыхтел и всё равно не получилось.
function checkSendBox() {
var name = $('#last_name').val();
var email = $('#email').val();
var text = $('#textarea1').val();
if (name.length >= 2 && email.length >= 5 && text.length >= 5)
$('#sendButton').removeAttr('disabled');
else
$('#sendButton').attr('disabled','disable');
}
|
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="email" type="email" value="">
<button id="sendButton" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#email').keyup(function(){
$('#sendButton').prop('disabled', $(this).val().length<=5);
});
</script>
</body>
</html>
|
j0hnik, так она только на валидацию по длине?
Так я такое сделал. Мне нужно валидацию на допустимые символы email. Поле уже само проверяет его на символы и выводит сообщение вот. Вот я бы хотел, чтобы скрипт эту валидацию видел и включал/выключал кнопку. Это поле с html5 - http://materializecss.com/forms.html картинка - http://prntscr.com/fij59m |
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="email" type="email">
<button id="sendButton" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/;
$('#email').keyup(function(){
$('#sendButton').prop('disabled', !pattern.test($(this).val()));
});
</script>
</body>
</html>
|
Вот это уже рабочая тема. Тоже делал с проверкой на символы, но что-то не пошло.
Потом решил, что где-то должна быть в html5 фигня, которая сообщает что не валидно. Ну и так подойдёт. |
j0hnik, как такой код объединить ещё с проверкой полей #last_name, #textarea1, которые уже на длину. Все условия должны выполнятся.
|
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="lastName" type="text">
<input id="email" type="email">
<textarea id="textarea1" type="text"></textarea>
<button id="sendButton" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/;
$('#email, #lastName, #textarea1').keyup(function(){
$('#sendButton').prop('disabled', !pattern.test($('#email').val()) || $('#lastName').val().length<=5 || $('#textarea1').val().length<=5);
});
</script>
</body>
</html>
все просто, все условия надо проверить |
Благодарю. Работает как нужно.
|
| Часовой пояс GMT +3, время: 09:29. |