Проверка формы javascript остановить открытие нового окна
Я написал большую страницу, включая форму, как мой первый проект JavaScript. Я получил некоторую помощь здесь, так что спасибо. Я очень доволен тем, что у меня есть, но у меня есть еще одна проблема, с которой мне нужно разобраться.
Код, который я отправлю здесь, является тестером. У меня есть пара функций, прикрепленных к новому окну onClick. Что происходит, пользователь отправляет форму, и его информация появляется в новом окне. (Моя исходная страница, конечно, более сложная.) Есть одна функция с именем askForHelp, которая показывает предупреждение в новом окне, если определено значение для 'state', и очень простая validateForm, которая показывает предупреждение для родителя?? окно, если значения оставлены пустыми.
Проблема в том, что у b/c i есть все функции, запущенные onClick, и я понимаю, что они работают одновременно, новое окно открывается независимо от того, что делает пользователь (с предупреждениями, отображаемыми в разных местах).
Основываясь на других подобных вопросах, я попытался добавить в мои условные выражения return false и return true, но это ничего не сделало.
Теперь я знаю, что есть намного лучшие способы сделать то, что я делаю здесь, и что моя проверка формы является базовой и слабой, но, как мой первый опыт в программировании, мне было очень важно понять все, что я делаю, что я делаю по состоянию на сейчас.
Может кто-нибудь показать мне, как это исправить, чтобы новое окно открывалось только в случае проверки формы? Я бы предпочел не использовать jquery или радикальные шансы для кода, если это возможно.
Я ценю вклад каждого. Вот код:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<script type="text/javascript">
function newWindow() {
allInfo= open("", "displayWindow");
allInfo.document.open();
allInfo.document.write('<!doctype html><html><head><title>Test</title><meta charset="utf-8"></head><body>');
allInfo.document.write(document.getElementById ('state').value);
allInfo.document.write('<p>' + document.getElementById ('zip').value);
allInfo.document.write('</section></body></html>');
allInfo.document.close();
}
function askForHelp () {
var volunteer = document.getElementById('state').value;
if ((volunteer == "New York") || (volunteer == "NY") || (volunteer == "New Jersey") || (volunteer == "NJ")) {
allInfo.alert("test test test");
return false;
}
else {
return true;
}
}
function validateForm () {
var x = document.getElementById("state").value;
var y = document.getElementById("zip").value;
if (x == null || x == "" || y == null || y == "") {
alert("Please fill out the required fields.");
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<script type="text/javascript">
</script>
<form id="infoForm" method="post" name="infoForm">
<p>State: </p>
<p><input type="text" id="state" placeholder="State or Region"></p>
<p>Zip: </p>
<p><input type="text" id="zip" placeholder="Zip code" required /></p>
<p><input type="button" value="Submit Information" onClick="newWindow(), askForHelp(), validateForm()" ></p>
</form>
</body>
</html>
2 ответа
Вместо того, чтобы делать onClick с newWindow(), askForHelp(), validateForm()Почему бы просто не сделать один из них (который вы хотите сначала проверить), а затем заставить функцию вызывать другие, когда будете готовы?
function validateForm () {
var x = document.getElementById("state").value;
var y = document.getElementById("zip").value;
if (x == null || x == "" || y == null || y == "") {
alert("Please fill out the required fields.");
return false;
} else {
newWindow(); //Validation was successful so lets open the new window
}
}
Таким образом, вы можете иметь только validateForm() сработает при нажатии, а остальные сработают, когда им это понадобится. Вам нужно будет добавить askForHelp() внутри функции newWindow, чтобы иметь этот триггер, когда это необходимо.
Это своего рода бесстыдный плагин, но я только что написал библиотеку JS с открытым исходным кодом, которая пытается решить подобные проблемы. Я называю это "Есть".
http://jumpkick-studios.github.io/Is/
Он использует концепцию Maybe Monad:
http://en.wikibooks.org/wiki/Haskell/Understanding_monads/Maybe
Таким образом, это позволит вам решить эту проблему с помощью принципа единой ответственности.
var validateState=function(obj){
return (obj.state!=null) //error check here
}
var validateZip=function(obj){
return (obj.zip!=null) //error check here
}
var openWindow=function(){
//do open window stuff
}
var handleError(){
//handle errors here
}
var onClick=function(e){
var form={state:document.getElementById("state").value, zip:document.getElementById("zip").value})
new jumpkick.Is(form)
.is(validateState)
.is(validateZip)
.then(openWindow)
.catch(handleError)
.finally(function(){
//anything else can go here
});
}
ETA: Возможно, еще лучший способ подойти к этому - не использовать функцию единой ошибки дескриптора, поскольку вы можете отображать сообщения для каждого неправильного поля.
Так что, может быть, даже что-то вроде этого будет работать (хотя немного больше кода).
var onClick=function(e){
var validInput=true;
var state=document.getElementById("state").value, zip=document.getElementById("zip").value
new jumpkick.Is(state)
.not().isLongerThan(0)
.then(function(){
validInput=false;
//display message for state
});
new jumpkick.Is(zip)
.not().isLongerThan(0)
.then(function(){
validInput=false;
//display message for zip
});
if(validInput) // openWindow
}