Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Заставить корректно выводить сообщение в зависимости от введенного числа. Input и document.getElementById

Здравствуйте!

Есть несколько полей ввода, где пользователь должен вводить число и если оно больше 10, то выводиться сообщение о том, что можно вводить только числа от 1 до 10. Это работает верно с одним каким то полем, но я никак не могу заставить нормально выводить сообщение для нескольких полей. Получается так, что для первого поля выводит нормально а для второго поля в случае если я введу число меньше 10, то опять же выводиться сообщение. Как сделать чтобы сообщение корректно выводилось для нескольких полей?

Код в html, пример 1 поля, где я задаю id и вызываю функцию:

Код HTML5
1
2
<form method="post" action="" onsubmit="return check();">
<input type="text" id = "1" name='"HMI".PUNCH_STP' size="2">
И сам скрипт функции:

Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// function to check value
function check()
{
    var x = document.getElementById("1");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("1").value = "";    
        return false;
    }
    var x = document.getElementById("2");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("2").value = "";    
        return false;
    }
    var x = document.getElementById("3");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("3").value = "";    
        return false;
    }
}
В программировании JavaScript разбираюсь плохо, может кто то наглядно увидит в чем ошибки
Ответ: Спасибо всем. Проблему решила следующим образом:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// function to check value
function check_1()
{
    var x = document.getElementById("1");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("1").value = "";    
        return false;
    }
 
}
 
function check_2()
{
    var x = document.getElementById("2");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("2").value = "";    
        return false;
    }
 
}
 
function check_3()
{
    var x = document.getElementById("3");
    if (x.value >= 1  && x.value <= 10 ) 
    { 
        return true;
    }
    else 
    { 
        alert ("Enter a value from 1 to 10");
        document.getElementById("3").value = "";    
        return false;
    }
 
}
Вопрос: Ошибка в цикле imacros

Почему он выводит "Имя" которое находится в первой строчке 2 раза? а "Имя" во второй строчке не выводит? где ошибка?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var data,name,family;
data="CODE:";
data+="VERSION BUILD=9030808 RECORDER=FX"+ "\n";
data+="SET! ERRORIGNORE YES" + "\n";
 
for (i=1;i<=2;i++) {
data+="SET! DATASOURCE_DELIMITER ;"+"\n";
data+="SET! DATASOURCE text.txt"+"\n";
data+="SET! DATASOURCE_COLUMNS 2"+"\n";
data+="SET! LOOP " +i+ "\n";
data+="ADD! EXTRACT {{!COL1}}"+"\n";
data+="ADD! EXTRACT {{!COL2}}"+"\n";
iimPlay(data);
name = iimGetLastExtract(1);
family = iimGetLastExtract(2);
 
alert(name);
 
}
Ответ:
Сообщение от mikl25
Почему он выводит "Имя" которое находится в первой строчке 2 раза? а "Имя" во второй строчке не выводит? где ошибка?
потому что цикл до двух for (i=1;i<=2;i++), а вы выполняете alert в этом цикле.
Вопрос: Плагин validate, как придать стиль сообщению?

Подскажите пожалуйста, как настроить сообщения, выводимые с помощью плагина validate? А именно, как им назначить расположение?
Т.е. при неправильном вводе данных в поле input, появляется сообщение, которое помещено в messages:{
, и если сбоку этого поля input, в котором ввели неправильные данные, есть текст, то этот текст смещается в бок сообщением от плагина.
Как настроить расположение этих выводимых сообщений?
Ответ: Получилось только расположить все сообщения от всех inputов в один контейнер.
И если полей input несколько, то все сообщения собираются в одном месте.
А как правильно расположить выводимое сообщение напротив каждого поля, или как вставить в нужный контейнер каждое сообщение?

Добавлено через 1 минуту
Ну или хотя-бы вывести эти сообщения алертом
Вопрос: Вывод сообщения ошибки

Всем привет. Задача следующая - запись данных в БД. Всё работает, но нужно, чтобы когда поле "Номер страхового полиса" не заполнено - выплевывалось сообщение с ошибкой. Бьюсь через If, но не выходит. html файл приложил
Ответ:
Сообщение от 77brayan77
остервенело жал на enter, когда нужно было жать на кнопку)
У вас там есть код обработки нажатия enter. Вставьте эту проверку туда. Будет и при клике на enter работать
Javascript
1
2
3
4
5
 var currentid = $('#userid').val();
            if (!currentid){
                alert("введите что-то там");
                return false;
            }
Вопрос: Встроенные ошибки input, можно с ними как то работать?

Смотрите, если я тегу input задаю атрибут type="url" и ввожу не url у меня выдаст ошибку, ну или допустим если я через атрибут pattern задам регулярное выражение и введу что-то не соответствующее этому выражению, тоже будет выведена ошибка, а можно как то выводить подобные ошибки со своим содержимым, может как то через JS?

PS какой то конкретной задачи нет, просто стало интересно.
Ответ: Вроде бы нельзя. Только если самому сверстать всплывающий блок, и выводить туда свои ошибки.
Вопрос: Jquery.validate не выводит сообщения об ошибках

Здравствуйте!
Очень нужна ваша помощь.
Подскажите пожалуйста, почему не выводятся сообщения об ошибках?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test jQuery Validation Form</title>
  <script type="text/javascript" src="js/jquery.slim.min.js"></script>
  <script type="text/javascript" src="js/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $.validator.addMethod('validName', function (value) {
     var result = true;
     var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?"+"абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"+" ";
      for (var i = 0; i < value.length; i++) {
          if (iChars.indexOf(value.charAt(i)) != -1) {
              return false;
          }
      }
      return result;
  }, '');
  $.validator.addMethod('validDate', function (value) {
      var result = true;
      for (var i = 0; i < value.length; i++) {
        if(!/^([0-9]{4,4})+\.([0-9]{2,2})+\.[0-9]{2,2}$/.test(value)){
           return false;
        }
      }
      return result;
  }, '');
  $("#form_name").validate({
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      name: {
           required: true,
           validName: true,
           minlength: 4,
           maxlength: 25,
           remote: {
              url: "check_name.php",
              type: "post"
           }
      },
      password: {
           required: true,
           rangelength: [4, 25],
           remote: {
                url: "check_pass.php",
                type: "post",
                data: {
                      name: function() { 
                          return $("#name").val(); 
                      }
                }
           }
      },
      password_new: {
           minlength: 4,
           required: true
      },
      password_new_check: {
           required: true,
           equalTo: "#password_new"
      },
      email: {
           required: true,
           email: true
      },
      age: {
           required: true,
           range: [1,99]
      },
      date: {
           validDate:true     
      },
      urlname: {
           url: true
      },
      about: {
           minlength: 10,
           maxlength: 500
      }
    },
    messages: {
      name: {
        required: "Введите имя пользователя",
        validName: "Символы !@#$%^&*()+=-[]\\\';,./{}|\":<>? и пробелы запрещены. Также нельзя использовать русские буквы",
        minlength: "Минимум 4 символа ",
        maxlength: "Максимум 25 символов ",
        remote: "Такое имя уже существует "
      },
      password: {
        required: " Введите текущий пароль ",
        rangelength: "От 4 до 25 символов",
        remote: " Вы неправильно ввели пароль "
      },
      password_new: {
        minlength: "Минимум 4 символа ",
        required: "Введите пароль "
      },
      password_new_check: {
        required: "Повторно введите пароль ",
        equalTo: "Пароль неправильно введён повторно"
      },
      email: {
        required: "Введите адрес ящика",
        email: "Введите корректный адрес"
      },
      age: {
        required: "Укажите ваш возраст",
        range: "Укажите возраст в цифрах (до 99)"
      },
      date: {
        validDate: "Дата введена неверно (формат YYYY.MM.DD)"
      },
      urlname: {
        url: "Введите адрес, начиная с http://"
      },
      about: {
        minlength: "Напишите о себе немного",
        maxlength: "Не пишите так много!"
      }
    },
    errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent().find("label[@for='" + er + "']").find("span") );
    },
    success: function(label) {
      label.html("&nbsp;").addClass("checked");
    }
  });
});
</script>
 <style>
label span {
    color: #EA5200;
    font-weight:bold;
}
label.error {
    background:url("unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
}
label.checked {
    background:url("checked.gif") no-repeat 0px 0px;
}
</style> 
</head>

<body>

<form action="" method="post" name="form_name" id="form_name">
    <label for="name">Никнейм: <span></span></label><br>
    <input name="name" id="name" type="text" size="30" value=''>
    <table border="0" width="655px">
        <tr>
            <td valign="bottom" width="33%">
                <label for="password">Текущий пароль: <span></span></label><br>
                <input name="password" type="password" id="password" size="30" value="">
            </td>
            <td valign="bottom" width="33%">
                <label for="password_new">Новый пароль: <span></span></label><br>
                <input name="password_new" id="password_new" type="password" size="30" value=''>
            </td>
            <td valign="bottom">
                <label for="password_new_check">Повторно введите пароль: <span></span></label><br>
                <input name="password_new_check" id="password_new_check" type="password" size="30" value=''>
            </td>
        </tr>
        <tr>
            <td>
                <label for="email">E-mail: <span></span></label><br>
                <input name="email" id="email" type="text" size="30">
            </td>
            <td>
                <label for="age">Возраст: <span></span></label><br>
                <input name="age" id="age" type="text" size="30">
            </td>
            <td>
                <label for="date">Дата рождения: <span></span></label><br>
                <input name="date" id="date" type="text" size="30">
            </td>
        </tr>
    </table>
    <label for="urlname">Адрес сайта: <span></span></label><br>
    <input name="urlname" id="urlname" type="text" size="30"><br>
    <label for="about">О себе: <span></span></label><br>
    <textarea name="about" id="about" cols="79" rows="10"></textarea> 
<p><input type="submit" name="submit" value="Сохранить"></p>
</form>


</body>
</html>
Ответ: DDim1000,
версию 1.12.4 попробуйте вместо всех других
Вопрос: Вывод сообщений поверх всех остальных элементов

Доброго впемени суток
подскажите как вывести сообщение по верх всех элементов
Javascript
1
2
3
4
5
6
7
8
9
....
$('<div id="status">Данные успешно сохранены:'+data+'</div>')   //выводим сообщение об успешном ответе сервера
                            .insertAfter('#'+elementidsave)
                            .addClass("success")
                            .fadeIn('fast')
                            .delay(1000)
                            .fadeOut('slow', function() {this.remove();}); //уничтожаем элемент
.....
 
Добавлено через 1 час 55 минут
подскажите как сделать что бы при insertAfter а стольные объекты не двигались,было наложение на них
Javascript
1
2
3
4
5
6
7
8
....
                          $('<div id="status" class="status">Данные успешно сохранены:'+data+'</div>')   //выводим сообщение об успешном ответе сервера
                            .insertAfter('#'+elementidsave)
                            .addClass("success")
                            .fadeIn('fast')
                            .delay(2000)
                            .fadeOut('slow', function() {this.remove();}); //уничтожаем элемент
.....
CSS
1
2
3
4
5
6
7
.status>td{
        position: absolute;
        display:none; 
    margin-bottom:15px; 
    padding:5px 10px; 
        z-index: 99999;
}
Добавлено через 37 минут
есть кто живой ((
Ответ:
Сообщение от inetinf
подскажите как вывести сообщение по верх всех элементов
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="status">Данные успешно сохранены</div>
<table class="t1" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.t1 tr td {
  width:150px;
  height:30px;
  position:relative;
}
.status {
  width:100%;
  font-size:16px;
  color:#fff;
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  background:#23d818;
  text-align:center;
  display:none;
}
Javascript
1
2
3
4
5
$(document).ready(function(){
  $(".t1 tr td").click(function(){
    $(".status").fadeIn("normal").delay(1000).fadeOut("normal");        
  });
})
Вопрос: Браузер выводит синтаксическую ошибку в файле index.html хотя сам же показывает что этого символа нет

вот файлы:
index.html
HTML5
1
2
3
4
5
6
7
8
9
10
<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="snow"></div>
    <script src="script.js"></script>
    </body>
</html>
script.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
for (var i = 0; i < 50; i++) {
    el.innerHTML += "<img id='s" + i + "'; onclick='dis('s' + i + )'; src='images/snow.png'>";
    
    mas[i] = Math.random() * 5 - 3;
}
 
function dis(index) {
    var a = document.getElementById("s" + index); 
    a.id = 'nul';
    a.style.left = -100 + "px";
    a.style.top = -100 + "px";
}
 
function randX() {
    return Math.random() * 1500 - 300;
}
 
function randY() {
    return Math.random() * 700 - 100;
}
 
function move(index) {
    var snow = document.getElementById("s" + index);
    var x = parseFloat(snow.style.left);
    var y = parseFloat(snow.style.top);
    if (isNaN(x) || isNaN(y)) { 
        x = randX();
        y = randY(); 
    }
    
    x += mas[index]/6;
    y += 2;
 
    if (y > 670 || x > 1500) {
        x = randX();
        y = randY();
    }
    
    snow.style.left = x + "px";
    snow.style.top = y + "px";
}
 
function tick() {
  for (var t = 0; t < 50; t ++) {
    move(t);
  }
}
setInterval(tick, 20);
style.css
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
    background-color:#000000;
}
img { 
    position:absolute;
    width:100px;
    height:100px;
}
#img1 {
    top:100px;
    left:200px;
    width:100px;
    height:100px;
}
задача программы в том, чтобы при клике по снежинке она пропадала. Если есть более простые варианты решения то укажите их пожалуйста.То что выводит мой браузер на фотографиях (см вложения).
Ответ: Всеволод_Каспир, речь о том, что у вас с кавычками лажа там, да и точки с запятыми там не нужны.
Вопрос: Ошибка в работе инфоблока

Здравствуйте! Ребят,подскажите пожалуйста! У меня есть инфоблок типа Портфолио. В нем 6 разделов. Изменила название на свое и все работает. Пытаюсь сделать еще разделы. Битрикс создает. Далее пытаюсь добавить картинки в Портфолио.Битрикс создает. А вот когда пытаюсь открыть файл имя_файла . html, То он выводит 404 ошибку. Прикладываю скрины. Надеюсь на вашу помощь.
Ответ: Тема не актуальна. Ошибка была в сортировке.
Вопрос: Подключение include средствами ajax

Добрый всем день, может кто-нибуть подскажет, имеется следующее.
Когда нужно было подгрузить вид (страницу) в определенную область использовал следующую конструкцию
PHP
1
2
3
ajaxView($view, $arr = []){
//$view - нужная страница 
        require APP. "/views/{$this->route['controller']}/{$view}.php";
На страницу при необходимости предавал переменные. В конироллере имело такой вид
PHP
1
$this->ajaxView('ajax', $arr));
Затем ajax-м принимал ответ и выводил функцией .html(res); И все работало!
Но, задача усложнилась, теперь есть блок (гость/авториз) авторизация, также была сделана без перезагрузки страницы, эмулировал нажатие кнопки, считывал сериализацией данные и кидал в post массив ajax-м, дальше срабатывали функции модели php. которые выводили сообщения ошибки/успех, и в случае успеха писали в сесию данные, а в ajax строил новый блок
Javascript
1
2
3
4
5
6
7
8
9
10
11
$('.user').append('<div class="user-auth"></div>');
                    $('.user-auth').append('<span class="user__name">'+res.name+'</span>');
                    $('.user-auth span').hide().fadeIn("slow");
                    
                    /* avatar */
                    if(res.picture !==""){  
                        $(".user-auth").append('<img class="user__avatar" src="/public/userfiles/avatar/'+res.picture+'.jpg"/>');
                        $(".user-auth img").hide().fadeIn(500);}
                    else{
                        $(".user-auth").append('<img class="user__no_avatar" src="/public/web/img/user_avatar.png"/>');
                        $(".user-auth img").hide().fadeIn("slow");}
приведу кусок ну и все в таком же духе, т.е.
В модели это выглядело так
PHP
1
2
$result = array("success" => "success", "picture"=>"t",  "name" => $query['name'], "success"=>"Авторизация прошла успешна");
            echo json_encode($result);
Собственно все работало, но очень неудобно, ajax становится слишком громоздкий. Можно ли как то передавать нарезанный блок в формате json, чтобы выводить сообщения и одновременно подключать блок пользователь авторизовался
Ответ: Makaa, Мне кажется, что лучше при успешной авторизации, все-таки перезагружать страницу. Иначе это сильно усложняет дальнейшую разработку. Страниц много. На каждой может быть множество всяческих данных, которые связанные с пользователем.
По сути дела, аякс нужен, чтоб обрабатывать ошибки, ускоряя процесс авторизации. Если пользователь ввел все правильно и авторизировался, то ничего страшного, что страница перегрузится.

Добавлено через 9 минут
А так, что вам мешает в jsone в одном из свойств, передавать html код блока, который нужно обновить?