Как имитировать проверку распорок с помощью javascript / html / css
Последние несколько лет я сосредоточился на внутренней разработке, поэтому мне не хватает навыков javascript и css. Я добровольно выступаю в качестве веб-мастера для сайта и хотел бы улучшить проверку формы (в настоящее время ее нет). Моя проблема: В основном у меня есть одна форма с несколькими полями для имени, адресом электронной почты и номером телефона. Когда форма отправлена, я проверяю все поля. Если данные недействительны, я хотел бы изменить цвет метки этого поля на красный (аналогично проверке struts). Как это сделать проще всего?
Обновлено: у меня также есть внутренняя проверка PHP. Я хочу сделать его красивее и удобнее для пользователя. Проверка PHP находится на другом сервере. Если проверка не выполняется на серверной части, отображается сообщение, и пользователь вынужден использовать кнопку «Назад». Я надеюсь вернуться на исходную страницу и отобразить недопустимые поля.
Ответы 6
Проверка Struts происходит на стороне сервера; Проверка JavaScript выполняется на клиенте. Это различие важно, потому что проверка на стороне сервера по-прежнему работает, даже если ваш клиент отключит JavaScript в браузере (и ~ 10% людей, как сообщается, делают).
Лучше иметь и то, и другое, если можете.
когда вы создаете страницу на стороне сервера, отметьте в них все поля с ошибками:
<input type = "text" name = "phone_number" class = "error_field">
555-121
</input>
Затем в CSS страницы добавьте такую запись:
input.error_field { color: #FFF; bgcolor: #C00; }
(Точка «селектор класса» означает, что она применяется ко всем входам с атрибутом класса «error_field». Если вы уже используете классы для своих входных тегов, вы можете дать элементам несколько классов, просто используйте пробелы для разделения.)
Если вы хотите знать, какой код создает Struts для раскрашивания страницы, один из простых способов - использовать расширение Firebug для Firefox.
Предполагая, что метка находится на том же уровне иерархии DOM, что и входные данные, и что она находится рядом с входными данными в разметке, вы можете сделать что-то вроде этого.
Прежде всего, пример HTML:
<html>
<body>
<form onsubmit = "return validation()" action = "submit.php" method = "post">
<label for = "name">Name:</label>
<input type = "text" value = "" id = "name" />
<label for = "email">Email:</label>
<input type = "text" value = "" id = "email" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
Как видите, всем входам предшествует метка с правильным атрибутом for.
Теперь о Javascript, который войдет в голову:
<script type = "text/javascript">
function validation() {
//So we have a validation function.
//Let's first fetch the inputs.
name = document.getElementById("name");
email = document.getElementById("email");
//The variable error will increment if there is a validation error.
//This way, the form will not submit if an error is found.
error = 0;
//Now for validation.
if (name.value.length < 6) {
//We've found an error, so increment the variable
error++;
//Now find the corresponding label.
nameLabel = name.previousSibling;
//If we found the label, add an error class to it.
if (nameLabel && nameLabel.for = name.id) {
nameLabel.className = "error";
}
}
///////////////////
//Do the same with the email...
///////////////////
//Now, if there are no errors, let the form submit.
//If there are errors, prevent it from doing so.
return (error == 0) ? true : false;
}
</script>
Теперь просто добавьте немного CSS:
<style type = "text/css">
.error {
background-color: red;
}
</style>
Изменить - я думаю, вам не нужно такое решение, но если вы хотите, чтобы оно проверялось перед переходом на сервер, вот и все. :)
Вы можете собрать это самостоятельно, как предлагали другие. Но я, кажется, помню, что у Struts есть собственная проверка JavaScript. Его можно настроить для создания функций JavaScript, которые выполняют те же проверки, что и на стороне сервера. Проверьте документация - это может быть быстрый способ начать работу, хотя он может быть не таким настраиваемым, как вы хотите.
Я определенно не использовал распорки раньше, но я часто проверяю формы с javascript и без него.
На мой взгляд, у вас всегда должна быть проверка как на javascript, так и на стороне сервера, поэтому она должна работать для всех.
На стороне сервера вы должны сделать что-то вроде упомянутого glaziusf.myopenid.com, просто добавьте класс к элементу, который показывает его красным.
В javascript (и ajax) просто добавьте тот же класс к элементу, который вы бы использовали на стороне сервера, но динамически.
Я бы порекомендовал вам изучить фреймворк JavaScript, такой как JQuery или Prototype. JQuery помогает вам очень легко получать значения из отфильтрованных элементов, изменять их CSS, добавлять визуальные эффекты и т. д.
Я не совсем понимаю PHP-логику вашего сайта, но вы можете разместить проверку на той же странице, если действие подчиняется самому себе, хотя я не знаю, является ли это хорошей практикой. Например, вы помещаете вверху следующее:
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ){
//field validation code...
Чтобы перенаправить с помощью PHP, вы просто говорите:
header("Location: THE_PAGE.php");
Хотя до этого не стоило ничего придумывать. Вероятно, вы могли бы передать параметр обратно на свою страницу (например: THE_PAGE.php? ValMsg = 1), чтобы он отображал сообщения проверки или что-то в этом роде.
Спасибо за комментарий. Внутренняя проверка уже выполнена, но я хотел бы сделать интерфейс более удобным для пользователя. Я отредактировал свой вопрос.