Проверка формы JS не дает результата

Question

Проверка формы JS не дает результата

0

Я просматриваю уроки в CodeAcademy и пытаюсь создать простую форму HTML, проверяющую поля ввода с помощью JS. Это начало проекта домашнего животного для моего брачного бизнеса (ему нужен его сайт полностью перестроен).

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Email Form</title>
    <link rel='stylesheet' type='text/css' href='/style.css'/>
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="/script.js"></script>
</head>
<body>
    <form name="email-form" action="#">
        <input type='text' name="firstname" value="First Name" onsubmit="return validateForm();"><br>
        <input type='text' name='email' value="Email"><br>
        <input type='submit' name='submit' value='Get AMPed!'>
    </form>
</body>
</html>

JS-скрипт:

function validateForm() {
    var fName = document.email-form.firstname.value;
    if (fName == null || fName == "") {
        alert("Please provide your first name!");
        fName.firstname.focus();
        return false;
    }

    var fEmail = document.email-form.email.value;
    var atPos = fEmail.indexOf("@");
    var dotPos = fEMail.lastIndexOf(".");
    if (atPos < 1 || dotPos < atPos + 2 || dotPos + 2 >= fEmail.length) {
        alert("Please enter a valid e-mail address");
        return false;
    }
}

Я попытался с помощью "return validateForm();" используя onclick = на кнопке 'submit', но это тоже не работает.

Любая помощь будет впечатляюще потрясающей для тех, кто действительно пытается научиться правильному пути.

Stefan P. Di Bella 01 янв. 2014, в 16:27

Источник

0

Где вернуть истину?
Arpit Singh 01 янв. 2014, в 14:49
0

Я думаю, что это email-form которая вызывает проблемы. Вы не можете использовать «-» в идентификаторах. Это интерпретируется как расчет (электронная почта - форма). email_form используйте email_form в качестве имени.
Butt4cak3 01 янв. 2014, в 14:51

Теги:

javascript

html

forms

2 ответа

1

Прежде всего: document.email-form не будет работать, вам нужно использовать его следующим образом: document['email-form']. (Потому что - вызовет арифметический расчет)

Попробуйте использовать инструменты отладки вашего браузера, и вы увидите сообщения об ошибках.

Во-вторых, используйте onsubmit="return validateForm();" в тэге <form>, а не в <input>.

bbuecherl 01 янв. 2014, в 14:11

Ещё вопросы

Я думаю, что это email-form которая вызывает проблемы. Вы не можете использовать «-» в идентификаторах. Это интерпретируется как расчет (электронная почта - форма). email_form используйте email_form в качестве имени.

Butt4cak3 · Accepted Answer · 2014-01-01T13-59-00.000Z

В этом коде есть пара ошибок. Идея этого права правильная, хотя ваша функция вызывает несколько ошибок, что приводит к прерыванию функции, что означает, что она ничего не вернет.

Идентификаторы не должны содержать символ "-" (минус). Он зарезервирован для вычитания. Вы не можете использовать его в идентификаторах. Выражение document.email-form.firstname.value интерпретируется как вычисление. Он пытается вычесть form.firstname.value из document.email. Оба они не существуют, что приводит к ReferenceError.

Вместо символа минус используйте знак подчеркивания, который можно безопасно использовать в идентификаторах. Измените имя формы из email-form на email_form.

fName.firstname.focus() не существует. fName - это строка (содержимое ввода текста). То, что вы на самом деле хотите сделать, - document.email_form.firstname.focus().

Ваша функция всегда должна возвращать значение. Следовательно, вы должны return true в самом ее конце. Это не обязательно, но это способствует читабельности вашего кода.

Как только вы исправили все эти вещи, вы можете либо использовать onClick="return validateForm()" на вашей кнопке, либо onSubmit="return validateForm()" в форме.

Я знаю, что это поздний ответ, но спасибо за ваш подробный ответ. Вернувшись к этой проблеме несколько месяцев спустя, я теперь вижу ошибки, которые я сделал.
@ StefanP.DiBella Это было неожиданно. Но все равно рад помочь: D