l17l

Рейтинг
83
Регистрация
18.02.2012

Сделать можно все, но когда все оптимизируешь для поисковых, то сайт уже не для людей и не совсем удобный, так что тут надо выбирать ) сайт для людей или для поисковых систем.

Не совсем понял что это все дает, куча дублей, все эти дубли указывают на один сайт и таким способом основной сайт вылезает в топ, я это так понял.

вот хорошее решение, то что я хотел что бы через див выводилась валидация я сделал, делюсь !

<script type='text/javascript'>

function checkForm(obj, elems) {

var element, pattern;

for (var i = 0; i < obj.elements.length; i++) {// пробегаемся по всем элементам формы

element = obj.elements;
// Проверяем только нужные поля
if (elems != undefined)
if (elems.join().indexOf(element.type) < 0) continue;
// И только если есть чего говорить юзеру в случае ошибки
if (!element.getAttribute("check_message")) continue;
if (pattern = element.getAttribute("check_pattern")) { // если задан рег
pattern = new RegExp(pattern, "g");
if (!pattern.test(element.value)) {

document.getElementById('validationka').style.display = "block"
document.getElementById('validationka').innerHTML =element.getAttribute("check_message");

element.focus();
return false;
}
} else if(/^\s*$/.test(element.value)) {// иначе просто проверка что поле не пустое


document.getElementById('validationka').style.display = "block"
document.getElementById('validationka').innerHTML = element.getAttribute("check_message");

element.focus();
return false;
}
}
return true;
}
</script>

kostyanet:
Кроме того вы же могли поискать готовые библиотеки, в том числе на любимой народом жиквере говорят есть какая-то. Слова js form validation library Вот пример первой из выдачи http://parsleyjs.org/doc/examples/simple.html - как видите по тегам формы подход такой же. Только без паттернов и скорее всего его лайба будет тридцать килограмм и сотню километров как они все эти профи очень любят делать.

Сейчас уже встроенную валидацию можно юзать, нормально поддерживается http://caniuse.com/#feat=form-validation а там где не поддерживается - сработает браузер и все.

Короче, я не могу за вас писать эту штуку, а сами вы не осилите. Попробуйте найти что-то готовое, можно и на русском искать. Кстати у вас там фреймворк или что? В нем разве нет?

ЗЫ Кстати на сайте на любом можно утырить, это же скрипт, он весь в браузере.

да я ставил что то готовое, там все равно нужно переписывать под свои нужды, сколько денег возьмете что бы нормальный код написать?

по первой ссылке, там форма, там нет js.

kostyanet:
Так вот так не делается - через алерты. Алерты на ошибки ввода - явное пренебрежение нормами морали и права.

---------- Добавлено 22.07.2015 в 08:31 ----------

Весь бред комментировать не могу, слишком махровый, вот действующее вещество:

if (!pattern.test(element.value))

значит у нас есть элемент и его видно, правильно? Следовательно можно графически показать что что-то с ним не в порядке, например


if (!pattern.test(element.value))
element.classList.add('invalid');


Стиль надо предусмотреть, например

.invalid{border-color:#a00!important;}

Само собой бордер как таковой у элемента должен быть, но быть или сереньким, или беленьким, или "прозрачным".

Теперь юзер должен понять что он там сделал неправильно, значит дополняем


if (!pattern.test(element.value)) {
element.classList.add('invalid');
element.title=check_message;
}


Теперь юзер _увидит_ что поле обвелось красненьким, подведет мышь и прочитает почему.

Чтобы без ховеров - предусмотрите контейнер для вывода ошибок для каждого поля. Скажем под полем ввода нарисуйте

<p id="err-desciption"></p>

Тогда приделав заранее известный префикс к имени поля получите доступ к контейнеру


var err_cont = document.getElementById('err-'+element.name);
err_cont.textContent=error_message;


---------- Добавлено 22.07.2015 в 08:33 ----------

Да, если у инпута нет бордера, то обвести можно не бордером, но outline, который не занимает места в шаблоне.

---------- Добавлено 22.07.2015 в 08:58 ----------

Насчет остальной махры. Если бы эти проверки ввода были легкой и простой задачей, то никто бы не доставал своими RFC все эти WC3. Проверяли бы легко и просто еще стопицот лет. В том и проблема что сделать нормальную проверку не просто, если предусматривать хоть какой-то уровень абстракции. То есть предусматривать возможность проверки поля, которого еще нет, но оно может быть в форме. Иначе все эти проверки у вас будут сугубо конкретными и любые изменения состава формы приведут к переписыванию большей части кодов повсюду.

В этом определенно есть смысл - писать на нормальном уровне абстракции, потому что жизнь доказывает "никогда не говори никогда". Сегодня вы сказали никогда у меня там не будет силектов и файлов - завтра вам спустили указивку сделать силекты и файлы, или клиент захотел - что будете делать?

код который вы написали добавить к тому коду? или заменить какие тополя, я вот не понимаю и спрашиваю ! или удалить весь, но оставить то что вы предложили из кусков кода собрать один.

Попробовал я этот метод.


<script type='text/javascript'>
function checkForm(obj, elems) {
var element, pattern;
for (var i = 0; i < obj.elements.length; i++) {// пробегаемся по всем элементам формы
element = obj.elements;
// Проверяем только нужные поля
if (elems != undefined)
if (elems.join().indexOf(element.type) < 0) continue;
// И только если есть чего говорить юзеру в случае ошибки
if (!element.getAttribute("check_message")) continue;
if (pattern = element.getAttribute("check_pattern")) { // если задан рег
pattern = new RegExp(pattern, "g");
if (!pattern.test(element.value)) {
alert(element.getAttribute("check_message"));
element.focus();
return false;
}
} else if(/^\s*$/.test(element.value)) {// иначе просто проверка что поле не пустое
alert(element.getAttribute("check_message"));
element.focus();
return false;
}
}
return true;
}
</script>

пример для импута

<input type="text" name="prname" maxlength="80" id="textarea" autofocus check_message="Введите заголовок, должен быть не больше 80 букв" />

так вот после проверки, браузер фаерфокс, показывает окно с ошибками ! а так же предлагает закрыть эти окна если поставить галочку ! если поставить ее то и окна с ошибками не будет видно ! это же минус большой этого метода.

У меня на одном input и на двух textarea стоит этот метод, так вот если забыл ввести заголовок, то всплывает окно, я заполняю, пытаюсь дальше добавить новость, всплывает второе окно, введите короткий текст, опять нажал добавить, всплывает третье окно, заполните полный текст, в третьем окно и появилась поставьте галочку! если ее поставить, и не заполнить поле, а нажать добавить, то новость добавится без полного текста.

Да и окно не совсем красивое, стандартное от брайзера.

Выходит, что эта валидация не совсем хорошая.

kostyanet:
Это как бы уже норма, когда понимаете ли человек, ничтоже сумняще начинает учить специалистов как жить, прежде начитавшись предисловий у других специалистов.

Там же написано что юзать надо element.getAttribute(). Вот и юзайте. До какой старости браузеров добивает эта функция я не знаю. Зато точно знаю что термин "старый браузер" обознает только и единственно - Ишака. Потому что все нормальные браузеры как программы автоматически или полу-автоматически обновляются, и только ишачело застревает в той версии винды, под которую заточен.

Так вот попробуйте-ка зайти на сайт MDN возьмеркой ИЕ и расскажите что увидели.

element.getAttribute() те задачи что я хочу реализовать можно через данную функцию реализовать?

kostyanet:
Так нельзя. У вас нет никакого опыта и уровень знаний букварный, а с этими формами, если делать нормально, всегда был геморрой, иначе бы не были предприняты попытки в 5-м хтмле приблизить уже то будущее, когда браузеры сами будут все проверять по сценарию разработчика.

Тем не менее уже сейчас можно юзать новые типы инпутов и атрибуты pattern с required чтобы вывести валидацию формы на клиенте на приемлемый уровень абстракции.

Паттерны можно тут искать http://html5pattern.com/ или просить знающих людей сделать по ТЗ.

Для простой длины строки хватит атрибутов maxlength и minlength. Второй не стандартный, поэтому оба лучше брать через element.getAttribute(). Однако еще есть одна закономерность. Когда у вас определен атрибут minlength, то значит это поле однозначно required. Следовательно можно не размножать атрибуты, а юзать required одновременно как индикатор и как параметр если записать в него число - минимальную длину текста. Я так и делаю.

атрибуты pattern с required - знаю, читал уже, а толку ! если брайзер старый ! то оно и работать не будет.

поддержка брайзеров ( Pattern Support Firefox 4+ & Chrome 5+ & Opera 9.6+ & MSIE 10+ )

Что я хочу реализовать через js

Проверка на введение трех полей.

Начало формы:


<form method="post" id="addnews" class="form-horizontal" enctype="multipart/form-data">

заголовок:
<input type="text" name="prname" maxlength="80" />

короткий текст:
<textarea name="shortdescription" rows="3" maxlength="220"></textarea>

полный текст:
<textarea name="description" id="editor1" rows="20"></textarea></div>

кнопка добавить
<button type="submit" name="submit" id="submit" class="btn btn-primary">ДОБАВИТЬ НОВОСТЬ ИЛИ СТАТЬЮ НА САЙТ</button>

</form>

я форме присвоил ид id="addnews"

Див для вывода ошибок: ( <div id="resultred"></div> )

Код js - в коде ноль, но пытаюсь по другим примерам что то сделать.


<script>
jQuery(document).ready(function(){
jQuery("#submit").click(function(){
prname = $('[name="prname"]').val();
shortdescription = $('[name="shortdescription"]').val();
description = $('[name="description"]').val();

submitData = $('#addnews').serialize();
if(prname !== '' && shortdescription !== '' && description !== '')
{
$.ajax({
type: "POST",
url: 'http://'+location.host+'/admin/products/add',
data: submitData,
dataType: 'json',
success: function(data)

</script>

пока так сделал, дальше пока не понял сути.

понял что по нажатию на кнопку добавить новость, срабатывает js который проверяет всю форму, и после того если все хорошо, то он добавляет новость, а если есть ошибка то будет выводить ошибку.

что я хочу реализовать через js, нужно что бы была проверка что данные поля нужно заполнить, пустыми их оставлять нельзя, поля обязательные для заполнения ( prname, shortdescription, description )

У поля ( prname ), хочу сделать что бы нельзя было больше 80 символов писать, и меньше 10, то есть если меньше 10 или больше 80, то он должен будет выдавать ошибку с текстом, слишком мало символов в заголовке что то такое.

Для поля ( shortdescription ), хочу реализовать что бы меньше 50 символов нельзя было писать и больше 220, и если я заполнил меньше 50, то что бы скрипт валидации выдавал что слишком маленький текст, ну и если больше 220.

Для поля ( description ), поле обязательно для заполнения, если оставили пустым, то что бы писалось такое то поле не должно быть пустым.

Подскажите как дальше скрипт дописать, приведите пожалуйста пример.

Спасибо всем, да я так уже и понял что надо на js валидацию сделать, что бы не было перезагрузки страницы.

Всего: 325