Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.12.2014, 23:23
Интересующийся
Отправить личное сообщение для zorro76 Посмотреть профиль Найти все сообщения от zorro76
 
Регистрация: 12.12.2014
Сообщений: 11

Я новичок: делаю форму обработки, но она не работает корректно.
Идея такова: при отправке формы незаполненные поля или не правильно заполненные должны отображаться красным цветом и выводится справа tooltip с правилом: введите имя, введите пароль, введите телефон. Иначе, если все правильно - то поля зеленные и все ок.

А происходит все так: заполнены поля или нет, все отображается зеленным. tooltip не отображается. Форма на Bootstrap 3.

Я только начал изучать Js поэтому обращаюсь за помощью к знающим людям. Спасибо.
Вложения:
Тип файла: txt form.txt (1.7 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2014, 23:46
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<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>


Работает в новых браузерах. Для старых есть костыль.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2014, 23:59
Интересующийся
Отправить личное сообщение для zorro76 Посмотреть профиль Найти все сообщения от zorro76
 
Регистрация: 12.12.2014
Сообщений: 11

Это да, работает, спасибо, но у меня форма на 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();
    
}());
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2014, 00:35
Интересующийся
Отправить личное сообщение для zorro76 Посмотреть профиль Найти все сообщения от zorro76
 
Регистрация: 12.12.2014
Сообщений: 11

код к этому скрипту:
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2014, 13:05
Интересующийся
Отправить личное сообщение для zorro76 Посмотреть профиль Найти все сообщения от zorro76
 
Регистрация: 12.12.2014
Сообщений: 11

Ха, настойчивость дает результат)) разобрался.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
функция MoveTo() не корректно работает ДанилаDeep Events/DOM/Window 10 29.08.2014 15:40
Код работает корректно во всех браузерах кроме IE8 Yamasa Events/DOM/Window 6 18.01.2011 07:40
Не работает корректно загрузка файла в IE rroman Javascript под браузер 0 08.10.2010 19:12
Не корректно работает slice Dotod Общие вопросы Javascript 20 30.01.2010 23:31
Opera не корректно работает со скриптом Anat.nem Opera, Safari и др. 4 30.10.2009 13:39