Проверка формы JavaScript не работает при отправке - PullRequest
Новая
       10

Проверка формы JavaScript не работает при отправке

0 голосов
/ 24 октября 2011

Я работаю над разделом книги по проверке формы с помощью JavaScript.К сожалению, пример в книге не работает.Я понимаю и следую логике, лежащей в основе проверки (общая идея заключается в том, что если какая-либо из отдельных функций проверки поля возвращает значение функции проверки, тогда отобразится предупреждение и форма не будет отправлена ​​onSubmit), но ничего не происходит.происходит на представлении.Я несколько раз просмотрел скрипт и html и не могу найти ничего неправильного (я даже зашел на сайт книги и скопировал оттуда код).

Вот форма html и проверка JavaScript:

    <script>
    function validate(form) 
    {
            fail  = validateForename(form.forename.value)
            fail += validateSurname(form.surname.value)
            fail += validateUsername(form.username.value)
            fail += validatePassword(form.password.value)
            fail += validateAge(form.age.value)
            fail += validateEmail(form.email.value)
            if (fail == "") return true
            else {alert(fail); return false }
    }
    </script>

    <script>
    function validateForename(field) {
            if (field == "") return "No Forename was entered.\n"
            return ""
    }

    function validateSurname(field) {
            if (field == "") return "No Surname was entered.\n"
            return ""
    }

    function validateUsername(field) {
            if (field == "") return "No Username was entered.\n"
            else if (field.length < 5) return "Usernames must be at least 5 characters.\n"
            else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ allowed in Usernames.\n"
            return ""
    }

    function validatePassword(field) {
            if (field == "") return "No Password was entered.\n"
            else if (field.length < 6) return "Passwords must be at least 6 characters.\n"
            else if (! /[a-z]/.test(field) || ! /[A-Z]/.test(field) || ! /[0-9]/.test(field)) return "Passwords require one each of a-z, A-Z and 0-9.\n"
            return ""
    }

    function validateAge(field) {
            if (isNAN(field)) return "No Age was entered.\n"
            else if (field < 18 || field > 110) return "Age must be between 18 and 110.\n"
            return ""
    }

    function validateEmail(field) {
            if (field == "") return "No Email was entered.\n"
                    else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address is invalid.\n"
            return ""
    }
    </script>

</head>

<body>

    <table class="signup" border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
    <th colspan="2" align="center">Signup Form</th>
    <form method="post" action="adduser.php" onSubmit="return validate(this)">
    <tr><td>Forename</td><td><input type="text" maxlength="32" name="forename" /></td>
    </tr><tr><td>Surname</td><td><input type="text" maxlength="32" name="surname" /></td>
    </tr><tr><td>Username</td><td><input type="text" maxlength="16" name="username" /></td>
    </tr><tr><td>Password</td><td><input type="text" maxlength="12" name="password" /></td>
    </tr><tr><td>Age</td><td><input type="text" maxlength="3" name="age" /></td>
    </tr><tr><td>Email</td><td><input type="text" maxlength="64" name="email" /></td>
    </tr><tr><td colspan="2" align="center">
    <input type="submit" value="Signup" /></td>
    </tr></form></table>
</body>
</html>

Ответы [ 3 ]

4 голосов
/ 24 октября 2011

ничего не происходит при отправке

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

Форма не может быть обернута вокруг строк таблицы и находиться внутри таблицы, к которой принадлежат эти строки.Некоторые браузеры исправляют эту ошибку, перемещая форму после таблицы (но оставляя входные данные внутри таблицы).Это означает, что входные данные не находятся внутри формы и бездействуют.

В качестве быстрого решения переместите форму так, чтобы она окружала стол.

Как правильное решение, прекратите использование таблицдля макета.CSS - хороший инструмент для макета формы .

Вам также следует воспользоваться элементом метки , а не заполнять JS глобальными символами.

2 голосов
/ 24 октября 2011

Вот подсказка ... как вы пишете "isNAN"?

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

1 голос
/ 24 октября 2011

Замените isNAN на isNaN, и оно должно работать.

...