Как имитировать проверку распорок, используя javascript / html / css - PullRequest
0 голосов
/ 31 декабря 2008

Последние несколько лет я сосредоточился на бэкэнд-разработке, поэтому мне не хватает моих навыков работы с javascript и css. Я работаю волонтером в качестве веб-мастера сайта и хотел бы улучшить проверку формы (в настоящее время ее нет).
Моя проблема: В основном у меня есть одна форма с несколькими полями имени, адресом электронной почты и номером телефона. Когда форма отправлена, я проверяю все поля. Если данные недействительны, я хотел бы изменить цвет метки этого поля на красный (аналогично проверке распорок). Какой самый простой способ сделать это?

Редактировать: У меня также есть проверка PHP. Я хочу сделать его более привлекательным и удобным для пользователя. Проверка PHP находится на другом сервере. Если проверка не проходит на серверной части, отображается сообщение, и пользователь вынужден использовать кнопку «Назад». Я надеюсь перенаправить обратно на исходную страницу и отобразить недопустимые поля.

Ответы [ 6 ]

1 голос
/ 31 декабря 2008

Предполагая, что метка находится на том же уровне иерархии 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>

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

1 голос
/ 31 декабря 2008

при создании страницы на стороне сервера отметьте все поля с ошибками в них:

<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.

0 голосов
/ 13 января 2009

Я бы порекомендовал вам изучить 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), чтобы он показывал сообщения проверки или что-то в этом роде.

0 голосов
/ 31 декабря 2008

Я определенно раньше не использовал распорки, но я много проверяю формы с использованием и без использования JavaScript.

По моему мнению, у вас всегда должна быть проверка как на javascript, так и на стороне сервера, поэтому она должна работать для всех.

На стороне сервера, вы должны сделать что-то вроде glaziusf.myopenid.com , просто добавьте класс к элементу, который показывает его красным.

В javascript (и ajax) просто добавьте тот же класс к элементу, который вы будете использовать на стороне сервера, но динамически.

0 голосов
/ 31 декабря 2008

Вы можете собрать это сами, как предлагали другие. Но я помню, что у Struts есть своя валидация JavaScript. Его можно настроить для генерации функций JavaScript, которые выполняют те же проверки, что и на стороне сервера. Проверьте документацию - это может быть быстрый способ начать работу, хотя он может быть не так настраиваем, как вы хотите.

0 голосов
/ 31 декабря 2008

Проверка Struts происходит на стороне сервера; Проверка JavaScript выполняется на клиенте. Различие важно, потому что проверка на стороне сервера все еще работает, даже если ваш клиент отключает JavaScript в браузере (и, по сообщениям, ~ 10% людей делают).

Лучше всего иметь оба, если можете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...