$(".next").click(function() {
current_fs = $(this).parent();
var hasEmpty = $('input', current_fs).css('border-color', '#ccc').filter(function() {
return $.trim($(this).val()) === '';
}).css('border-color', '#f00').length;
if (hasEmpty) {
alert('А заполнять поля за тебя Пушкин будет?');
return false;
}
// Остальной код обработчика
});
Проверку по каждому отдельному полю, с учетом необходимых требований (формат Email, кол-во символов и т.д.) - это уже сами. не получится, на 99.999% уверен, а я, пожалуй, использую оставшиеся 0.001% )) Для теста, создайте html-документ, в который запишите следующий JS-код:
window.addEventListener('beforeunload', function (e) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send( 'key=' + encodeURIComponent('Hi') );
e.preventDefault();
var confirmationMessage = "";
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}, false);
И еще один PHP-файл "handler.php" в той же директории, в котором запишем:<?php
if (!empty($_POST['key'])) {
file_put_contents('test.txt', $_POST['key']);
}
Теперь откроем и закроем html-файл в любом браузере, кроме осла восьмой версии и ниже. Просто потому, что объект XMLHttpRequest в них не поддерживается, а кроссбраузерное решение нам для теста и не нужно. Результат можем наблюдать в создавшемся файле test.txt <form>
<select name="dropdown">
<option value="opt_1">Opt 1</option>
<option value="opt_2" selected>Opt 2</option>
<option value="opt_3">Opt 3</option>
</select>
<input type="text" name="some_text" value="Text">
<input type="checkbox" name="checkbox_1" value="checked" checked>
<input type="checkbox" name="checkbox_2" value="not checked">
<input type="radio" name="radio_group" value="not checked">
<input type="radio" name="radio_group" value="checked" checked>
<input type="radio" name="radio_group" value="not checked">
<textarea name="bigtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ab tempora voluptate assumenda!</textarea>
</form>
<div id="demo"></div>
var result = [];
[].forEach.call(document.querySelector('form').elements, function(el) {
if (['checkbox', 'radio'].indexOf(el.type) === -1 || el.checked) {
result.push(el.name + ' > ' + el.value);
}
});
demo.innerHTML = result.join('<br>');
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
console.log(settings.data);
}
});
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
if ('http://site.com'.indexOf(settings.url) !== -1) {
console.log(settings.data);
}
}
});
var root = $('<div class="districts" />'),
box, child;
for (var k in data) {
if (data.hasOwnProperty(k)) {
box = $('<div class="popup" />');
child = $('<div calss="' + k + '" />').appendTo(box);
for (var i in data[k].img) {
if (data[k].img.hasOwnProperty(i)) {
$('<img src="/img/' + k + '/' + data[k].img[i].name + '.png" />').appendTo(child);
}
}
box.appendTo(root);
}
}
$('body').append(root); // выводим на экран
// (!) при этом, выводим один раз, а не мучаем DOM на каждой итерации
<div class="districts">
<div class="popup">
<div calss="test">
<img src="/img/test/01.png">
<img src="/img/test/02.png">
<img src="/img/test/03.png">
</div>
</div>
<div class="popup">
<div calss="test2">
<img src="/img/test2/01.png">
<img src="/img/test2/02.png">
<img src="/img/test2/03.png">
</div>
</div>
<div class="popup">
<div calss="test3">
<img src="/img/test3/01.png">
<img src="/img/test3/02.png">
<img src="/img/test3/03.png">
</div>
</div>
<div class="popup">
<div calss="test4">
<img src="/img/test4/01.png">
<img src="/img/test4/02.png">
<img src="/img/test4/03.png">
</div>
</div>
</div>
$(".tets .popup").each(function(i, el) {
$(el).fadeIn(1000).delay(3000 * i).fadeOut(1000);
});
$(".tets .popup").each(function(i, el) {
$(el).delay(3000 * i).fadeIn(1000);
});
<input type="text">
<button>Click me!</button>
function handler() {
console.log('Do something');
}
$('input').on('keyup', function(e) {
if (e.which === 13) {
handler();
// или
// handler.call(this);
}
});
$('button').on('click', handler);
function handler() {
console.log(this);
}
var but = $('button');
$('input').on('keyup', function(e) {
if (e.which === 13) {
but.trigger('click');
}
});
but.on('click', handler);
Что ни так?В общем-то, "не так" с самим IE, а не кодом. Используется синтаксис ES6, который в осле поддерживается, мягко говоря, очень туго, даже в 11-ой версии. Да и объект Promise поддерживается только в IE Edge. Частично может помочь использование Babel JS, но решит ли он все проблемы в осле - не уверен (не проверял).
<div id="slider"></div>
<p>
<input id="inp" type="number" max="100">
</p>
var factor = 4, // число, на которое необходимо умножать значение
inp = $("#inp").attr('min', factor),
slider = $('#slider').slider({
min: factor,
max: 100,
range: 'min',
value: 0,
step: factor,
slide: function(event, ui) {
var num = ui.value / factor;
inp.val(ui.value);
}
});
inp.on('input', function() {
var num = factor * $(this).val();
slider.slider('value', num);
});
div {
height: 100vh;
}
console.log( +[] ); // 0
console.log( 1 / [] ); // Infinity, т.к. исходя из примера выше, +[] === 0, т.е. деление на 0
console.log( 'A' + [] ); // A
console.log( 'A' - [] ); // NaN
Глобальное свойство Infinity является числовым значением, представляющим бесконечность.
<div>
<label>
<input type="hidden" name="stand[3]">3
</label>
<label>
<input type="hidden" name="stand[1]">1
</label>
<label>
<input type="hidden" name="stand[2]">2
</label>
</div>
<div>
<img src="http://automated-testing.info/images/emoji/apple/smile.png" alt="">
<img src="http://radar.techcabal.com/images/emoji/apple/grin.png" alt="">
<img src="http://www.stickees.com/files/emoticons/emojicons/148-happy-smile.png" alt="">
</div>
<button>GO!</button>
var but = $('button'),
inp = $('[name^="stand"]');
$('img').draggable({
revert: 'invalid'
});
$('label').droppable({
accept: function() {
return $.trim($('input', this).val()) === '';
},
tolerance: 'fit',
drop: function(e, ui) {
$('input', this).val(ui.draggable.attr('src'));
$(ui.draggable).draggable('disable');
var hasEmpty = inp.filter(function() {
return $.trim($(this).val()) === '';
}).length;
but[hasEmpty ? 'hide' : 'show']();
}
});
but.on('click', function() {
$.ajax({
url: '/echo/html/',
type: 'POST',
data: inp,
success: function(data) {}
});
});
print_r($_POST['stand']);
Array (
[1] => path/to/img1.png
[2] => path/to/img2.png
[3] => path/to/img3.png
)