<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
/** тут проверка */
…
/** блокируем submit */
return false;
})}
});
</script>
</head>
<body>
<form>
<input type="text" name="test" value="" required />
<input type="submit" />
</form>
</body>
</html>
Форум → Программирование → JavaScript → Проверка формы на заполнение
Проверка формы на заполнение
Страницы: ← Предыдущая страница • Следующая страница →
-
27 января 2011 г. 7:47, спустя 48 минут 18 секунд
вот накидал примерчикСпустя 202 сек.если сегодня вечерком будет время - доработаю, для самоинтереса -
27 января 2011 г. 8:13, спустя 26 минут 9 секунд
рабочий вариант:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
alert('Необходимое поле не заполнено!');
checked = false;
}
}
})
if (!checked) return false;
})}
});
</script>
</head>
<body>
<form>
<input type="text" name="test" value="" required />
<input type="submit" />
</form>
</body>
</html> -
27 января 2011 г. 8:19, спустя 6 минут 9 секунд
переработал ещё чуток:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
alert('Необходимое поле не заполнено!');
$(this).focus();
checked = false;
return false;
}
}
})
if (!checked) return false;
})}
});
</script>
</head>
<body>
<form>
<input type="text" name="test1" value="" required />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" />
<input type="submit" />
</form>
</body>
</html> -
27 января 2011 г. 8:35, спустя 15 минут 3 секунды
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
работает в Opera Safari Chrome -
27 января 2011 г. 8:41, спустя 6 минут 2 секунды
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
alert('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp($(this).attr('pattern'), 'ig');
if (!(preg.test($(this).val()))) {
$(this).focus();
alert('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})}
});
</script>
</head>
<body>
<form>
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" />
<input type="submit" />
</form>
</body>
</html>
required + pattern кроссбраузерно! -
27 января 2011 г. 8:48, спустя 7 минут 24 секунды
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
работает в Opera Safari Chrome
и это тоже можно сделать кроссбраузерно -
27 января 2011 г. 9:27, спустя 39 минут 1 секунду
в коде что я изложил выше много говна т.к. писался он на скорую руку, щас переделаюСпустя 290 сек.во<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5 test</title>
<style type="text/css">
.valid,
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
.invalid,
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
alert('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
if (!(preg.test($(this).val()))) {
$(this).focus();
alert('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})
function csschecked (element) {
/** реализуем кроссплатформенные css3 подсказки */
var checked = true;
if (element.attr('required') !== undefined) {
if (element.val() === '') {
checked = false;
}
}
if (element.attr('pattern') !== undefined) {
var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
if (!(preg.test(element.val()))) {
checked = false;
}
}
if (!checked)
{
element.removeClass('invalid valid').addClass('invalid');
}
else
{
element.removeClass('invalid valid').addClass('valid');
}
}
$('input').keyup(function (){csschecked($(this))})
.focus(function (){csschecked($(this))})
.focusout(function () {$(this).removeClass('invalid valid')});
}});
</script>
</head>
<body>
<form>
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" />
<input type="submit" />
</form>
</body>
</html> -
27 января 2011 г. 9:44, спустя 17 минут 17 секунд
в csschecked надо добавить это:if (element.attr('required') === undefined && element.attr('pattern') === undefined)
{
return true;
} -
27 января 2011 г. 9:50, спустя 5 минут 30 секунд
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5 test</title>
<style type="text/css">
.valid,
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
.invalid,
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
error('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
if (!(preg.test($(this).val()))) {
$(this).focus();
error('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})
function csschecked (element) {
/** реализуем кроссплатформенные css3 подсказки */
var checked = true;
if (element.attr('required') === undefined && element.attr('pattern') === undefined)
{
return true;
}
if (element.attr('required') !== undefined) {
if (element.val() === '') {
checked = false;
}
}
if (element.attr('pattern') !== undefined) {
var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
if (!(preg.test(element.val()))) {
checked = false;
}
}
if (!checked)
{
element.removeClass('invalid valid').addClass('invalid');
}
else
{
element.removeClass('invalid valid').addClass('valid');
}
}
function error (message) {
$('#error').html(message);
}
$('input').keyup(function (){csschecked($(this))})
.focus(function (){csschecked($(this))})
.focusout(function () {$(this).removeClass('invalid valid')});
}});
</script>
</head>
<body>
<form>
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" />
<input type="submit" />
<div id="error"></div>
</form>
</body>
</html> -
27 января 2011 г. 9:59, спустя 9 минут 9 секунд
пойду скачаю осла 9, говорят в нём есть поддержка html5, если это так то код надо будет чуток доработать убрав проверку для 9 осла -
27 января 2011 г. 10:21, спустя 22 минуты 29 секунд
ложь пиздёж и провокация - outline так и не робит в ie9, ну и html5 там тоже хуёво, так что код изменять не придётся -
27 января 2011 г. 10:32, спустя 10 минут 10 секунд
короче вот полностью кроссплатформенный вариант, по крайней мере в IE9 точно робит, в IE8 наверное не будет работать outline<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>html5 test</title>
<style type="text/css">
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: #0f0 solid 1px;
}
.valid
{
outline: #0f0 solid 1px;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: #f00 solid 1px;
}
.invalid
{
outline: #f00 solid 1px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
error('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
if (!(preg.test($(this).val()))) {
$(this).focus();
error('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})
function csschecked (element) {
/** реализуем кроссплатформенные css3 подсказки */
var checked = true;
if (element.attr('required') === undefined && element.attr('pattern') === undefined)
{
return true;
}
if (element.attr('required') !== undefined) {
if (element.val() === '') {
checked = false;
}
}
if (element.attr('pattern') !== undefined) {
var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
if (!(preg.test(element.val()))) {
checked = false;
}
}
if (!checked)
{
element.removeClass('invalid valid').addClass('invalid');
}
else
{
element.removeClass('invalid valid').addClass('valid');
}
}
function error (message) {
$('#error').html(message);
}
$('input').keyup(function (){csschecked($(this))})
.focus(function (){csschecked($(this))})
.focusout(function () {$(this).removeClass('invalid valid')});
}});
</script>
</head>
<body>
<form>
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" />
<input type="submit" />
<div id="error"></div>
</form>
</body>
</html> -
27 января 2011 г. 10:58, спустя 26 минут 53 секунды
теперь ещё реализовал type=email<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>html5 test</title>
<style type="text/css">
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: #0f0 solid 1px;
}
.valid
{
outline: #0f0 solid 1px;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: #f00 solid 1px;
}
.invalid
{
outline: #f00 solid 1px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('input[type=email]').each(function() {
$(this).attr('pattern', '([a-z,0-9,_,\-,\.])+\@([a-z,0-9,_,\-])+(\.([a-z,0-9])+)+');
})
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
error('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
if ($(this).attr('required') === undefined && $(this).val() == '') {
return true;
}
else if (!(preg.test($(this).val()))) {
$(this).focus();
error('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})
function csschecked (element) {
/** реализуем кроссплатформенные css3 подсказки */
var checked = true;
if (element.attr('required') === undefined && element.attr('pattern') === undefined)
{
return true;
}
if (element.attr('required') !== undefined) {
if (element.val() === '') {
checked = false;
}
}
if (element.attr('pattern') !== undefined) {
var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
if (!(preg.test(element.val()))) {
checked = false;
}
}
if (!checked)
{
element.removeClass('invalid valid').addClass('invalid');
}
else
{
element.removeClass('invalid valid').addClass('valid');
}
}
function error (message) {
$('#error').html(message);
}
$('input').keyup(function (){csschecked($(this))})
.focus(function (){csschecked($(this))})
.focusout(function (){$(this).removeClass('invalid valid')});
}});
</script>
</head>
<body>
<form method="post">
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" pattern="[a-z]+" />
<input type="text" name="test4" value="" />
<input type="email" name="email" />
<input type="submit" />
<div id="error"></div>
</form>
</body>
</html>
вроде бы всё ок и даже работает в осле, НО столкнулся с дикими багами 9 осла, как обойти пока хз, сейчас выложу скрины багов -
-
27 января 2011 г. 11:20, спустя 15 минут 10 секунд
доработал ещё чуток<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>html5 test</title>
<style type="text/css">
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: #0f0 solid 1px;
}
.valid
{
outline: #0f0 solid 1px;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: #f00 solid 1px;
}
.invalid
{
outline: #f00 solid 1px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
var nAgt = navigator.userAgent;
if (!((verOffset=nAgt.indexOf("Opera"))!=-1||(verOffset=nAgt.indexOf("Chrome"))!=-1||(verOffset=nAgt.indexOf("Safari"))!=-1)) {
$('input[type=email]').each(function() {
if ($(this).attr('pattern') === undefined) {
$(this).attr('pattern', '([a-z,0-9,_,\-,\.])+\@([a-z,0-9,_,\-])+(\.([a-z,0-9])+)+');
}
})
$('form').submit(function () {
var checked = true;
$(this).find('input').each(function() {
if ($(this).attr('required') !== undefined)
{
if ($(this).val() === '') {
$(this).focus();
error('Необходимое поле не заполнено!');
checked = false;
return checked;
}
}
if ($(this).attr('pattern') !== undefined)
{
var preg = new RegExp('^'+$(this).attr('pattern')+'$', 'ig');
if ($(this).attr('required') === undefined && $(this).val() == '') {
return true;
}
else if (!(preg.test($(this).val()))) {
$(this).focus();
error('Неверный формат!');
checked = false;
return checked;
}
}
})
if (!checked) return false;
})
function csschecked (element) {
/** реализуем кроссплатформенные css3 подсказки */
var checked = true;
if (element.attr('required') === undefined && element.attr('pattern') === undefined && element.attr('type') !== 'text')
{
return true;
}
if (element.attr('required') !== undefined) {
if (element.val() === '') {
checked = false;
}
}
if (element.attr('pattern') !== undefined) {
var preg = new RegExp('^'+element.attr('pattern')+'$', 'ig');
if (element.attr('required') === undefined && element.val() == '') {
checked = true;
}
else if (!(preg.test(element.val()))) {
checked = false;
}
}
if (element.attr('required') === undefined && element.attr('pattern') === undefined)
{
checked = true;
}
if (!checked)
{
element.removeClass('invalid valid').addClass('invalid');
}
else
{
element.removeClass('invalid valid').addClass('valid');
}
}
function error (message) {
$('#error').html(message);
}
$('input').keyup(function (){csschecked($(this))})
.focus(function (){csschecked($(this))})
.focusout(function (){$(this).removeClass('invalid valid')});
}});
</script>
</head>
<body>
<form method="post">
<input type="text" name="test1" value="" required pattern="[0-9]+" />
<input type="text" name="test2" value="" required />
<input type="text" name="test3" value="" pattern="[a-z]+" />
<input type="text" name="test4" value="" />
<input type="email" name="email" />
<input type="submit" />
<div id="error"></div>
</form>
</body>
</html>Спустя 64 сек.проверил в Opera 11, Chrome, Firefox 3.6 - всё работает отлично
Страницы: ← Предыдущая страница • Следующая страница →
Пожалуйста, авторизуйтесь, чтобы написать комментарий!