Я новичок: делаю форму обработки, но она не работает корректно.
Вложений: 1
Идея такова: при отправке формы незаполненные поля или не правильно заполненные должны отображаться красным цветом и выводится справа tooltip с правилом: введите имя, введите пароль, введите телефон. Иначе, если все правильно - то поля зеленные и все ок.
А происходит все так: заполнены поля или нет, все отображается зеленным. tooltip не отображается. Форма на Bootstrap 3. :help: Я только начал изучать Js поэтому обращаюсь за помощью к знающим людям. Спасибо. |
<form action="javascript:void alert('Форма отправлена!')">
<input placeholder="Имя" type="text" title="Укажите ваше имя (не менее двух букв)" required pattern="[а-яА-ЯёЁ]{2,128}" />
<input placeholder="Телефон" type="tel" title=" Укажите номер телефона (от 5 до 13 цифр)" required pattern="[0-9]{5,13}" />
<button type="submit">Отправить</button>
</form>
Работает в новых браузерах. Для старых есть костыль. |
Это да, работает, спасибо, но у меня форма на Bootstrap, и ошибка в ней...
Хочу разобраться, ведь все правильно как будто делал, но..
(function () {
var app = {
initialize: function () {
this.modules();
this.setUpListeners();
},
modules: function () {
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function (e) {
e.preventDefault();
alert('e');
var form = $(this);
if (app.validateForm(form) === false) return false;
console.log('go in ajax');
},
validateForm: function (form) {
var inputs = form.find('input'),
valid = true;
inputs.tooltip('destroy');
$.each(inputs, function (index, val) {
var input = $(val),
val = input.val(),
formGroup = input.parents('.form-group'),
label = formGroup.find('label').text().toLowerCase(),
textError = "Введите " + label;
if (val.length === 0) {
formGroup.addClass('has-error').removeClass('has-success');
input.tooltip({
trigger: 'manual',
placement: 'right',
title: textError
}).tooltip('show');
valid = false;
} else {
formGroup.addClass('has-success').removeClass('has-error');
}
return valid;
});
}
}
app.initialize();
}());
|
код к этому скрипту:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap forms</title>
<link rel="stylesheet" href="main_form.css">
<link href="bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-sm-6">
<h1 class="header">Форма заказа</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Имя</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-2 control-label">Телефон</label>
<div class="col-sm-10">
<input name="phone" type="text" class="form-control" id="inputPhone" placeholder="Phone">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Отправить</button>
</div>
</div>
</form>
<form action="javascript:void alert('Форма отправлена!')">
2
<input placeholder="Имя" type="text" title="Укажите ваше имя (не менее двух букв)" required pattern="[а-яА-ЯёЁ]{2,128}" />
3
<input placeholder="Телефон" type="tel" title=" Укажите номер телефона (от 5 до 13 цифр)" required pattern="[0-9]{5,13}" />
4
<button type="submit">Отправить</button>
5
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="main_form.js"></script>
</body>
</html>
|
Ха, настойчивость дает результат:))) разобрался.
|
| Часовой пояс GMT +3, время: 06:01. |