HTML forms, Trouble with form validation Options

[jimbondy]

I posted this before supper and just ran off in a hurry. I came back and can't find it, so maybe it just didn't go as I received no notice from a mediator. I hope everything is ok...so here it is again.

Hi.
I've been pouring over this issue for a week now and cannot figure it out on my own.
I am learning javascript from EJ Media

Javascript tutorial

Everything is peachy except when I try to replicate what he is doing regarding 'form validation' in Javascript Form Tutorial #43. Almost everything about the form works. One area of my 'if' statement works fine as I have it set to give me an alert when I hit the 'submit' button and one of the fields is blank, (so it is seeing my javascript code and executing one part of the 'if' statement. The problem I'm having is if my fields all have data it is supposed to activate the "action = message.html" and issue the text that I have on the 'message.html' page "Your form has been submitted"
When I hit my submit button I get the error "This page isn't working"
I've attached my HTML, CSS, & HTML (message). but the attachment function below wouldn't take it, so I'm adding the code here.
I hope that this is a good way to send my stuff to you. Any help would be appreciated
Javascript code titled jWebsiteAuthor.js here:
function validateTextbox() {
var box = document.getElementById("name");
var box2 = document.getElementById("email");
var box3 = document.getElementById("number");
var box4 = document.getElementById("street");
var box5 = document.getElementById("city");
var box6 = document.getElementById("province");
var box7 = document.getElementById("country");
var box8 = document.getElementById("postal");
var box9 = document.getElementById("message").value;

if (box.value == "" || box2.value == "" || box3.value == "" || box4.value == "" || box5.value == "" || box6.value == "" || box7.value == "" || box8.value == "" || box9.value == "") {
alert("This field cannot be blank.");
// the method called focus allows us to style a box Placed here styles it after the alert...notice that
//the styling is only for the var box not box2 box3 and so on. If we wanted to do all we would have to
//select all of them individually (as far as I know for now anyway).

// box.focus();
// box.style.border = "solid 3px red"
return false;
}
}


function formTopic() {
var theList = document.getElementById("myList");
}

I'm not sure if I needed to 'Add into Post' the 3 attachments below. I hope that you can see them.
Thanks so much
JimmyB
 hContact.html ( 11.09k ) Number of downloads: 66
 cContactUs.css ( 9.47k ) Number of downloads: 60
 message.html ( 237bytes ) Number of downloads: 66

[pandy]

I posted this before supper and just ran off in a hurry. I came back and can't find it, so maybe it just didn't go as I received no notice from a mediator. I hope everything is ok...so here it is again.

I think you didn't post it. No such post has been deleted.

I'm not sure if I needed to 'Add into Post' the 3 attachments below. I hope that you can see them.

Yes, you do need to do that. And you did.

I think it works just fine. If I fill all the fields the script tries to take me to a page called message.html when the form is submitted . And that was the goal, right?

Do you test this locally or on a server?

[jimbondy]

Yes That is the goal. you should get a message saying that the form was submitted. So it works for you??? Hmmm

I'm just testing it on my PC nothing special.

[pandy]

Yes That is the goal. you should get a message saying that the form was submitted. So it works for you??? Hmmm

No, no message. Maybe I misunderstood. I thought the message was printed on the message.html page, but it's supposed to come before I'm taken there?

[pandy]

In fact, I don't get the alert either if I leave a field blank.

Hmm. I don't see that the JS you posed has any code for the missing submission message? Did you miss a bit when you pasted it in?

[jimbondy]

Yeah It should open a new tab in chrome heading with the word 'message'

[jimbondy]

I do get the alert

[pandy]

Darn. You replied while I edited my post above.

So I take it again. I don't see that the JS you posed has any code for that message. Did you miss a bit when you pasted it in?

[jimbondy]

https://www.youtube.com/watch?v=Bl59zGI1gCA...El&index=43

here's a link to the instructors video. He has 'pastebin's of all of his code that makes this thing work...on his channel anyway

[pandy]

But the code at pastebin is basically what you've got. I see nothing about the missing message there either.

Now I get the alert box though. Strange. I haven't changed a thing.

[jimbondy]

Strangely enough.
The program is seeing the 'if' statement and executing it, but the return is where it stalls out. I've been banging my head on the wall for a week and can't figure it out.
I'm learning...but still...

[pandy]

There must be more JS. Are you sure what you posted here is all you've got? I don't get that error message you talk about either BTW. I couldn't that isn't in the code either.

[jimbondy]

Here is a copy of the code I sent. The alert is "This field cannot be blank". It's just past the if statements. There is a few lines of code at the bottom but I don't think that they are related to the form.

function validateTextbox() {
var box = document.getElementById("name");
var box2 = document.getElementById("email");
var box3 = document.getElementById("number");
var box4 = document.getElementById("street");
var box5 = document.getElementById("city");
var box6 = document.getElementById("province");
var box7 = document.getElementById("country");
var box8 = document.getElementById("postal");
var box9 = document.getElementById("message").value;

if (box.value == "" || box2.value == "" || box3.value == "" || box4.value == "" || box5.value == "" || box6.value == "" || box7.value == "" || box8.value == "" || box9.value == "") {
alert("This field cannot be blank.");

// the method called focus allows us to style a box Placed here styles it after the alert...notice that
//the styling is only for the var box not box2 box3 and so on. If we wanted to do all we would have to
//select all of them individually (as far as I know for now anyway).

// box.focus();
// box.style.border = "solid 3px red"
return false;
}
}

//This is noted at the start of the bottom form which should have something in
//regarding the id - myList
function formTopic() {
var theList = document.getElementById("myList");
}

function changeColor() {
var test = document.getElementByClass("bod").style.color = "red";
}

[jimbondy]

I just tried it again and I do get the alert

[jimbondy]

Hey Pandy. I really appreciate your help but I have an early morning and need to hit the sack.
If you can think of anything just pass it off to me and I'll check it out tomorrow afternoon or evening when I return.
Thanks Again
I know we will figure this out. It has to be something that is missing somehow. Maybe an error someplace in his pastebin code.
JimmyB

[Jason Knight]

Said "tutorial" is at least a decade out of date. We call that "web rot" and it's all too common a problem.

Why is it web rot?

1) Because checking if a field is empty is none of JavaScript's business.

2) you HAVE to do the same checks again server-side since client-side can NEVER be trusted.

3) HTML now has the "required' attribute.

CODE

<input type="email" name="email" required>

Will only allow a validly formed e-mail address and "required" won't let the field submit as empty.

The only way you'd need to add scripting is if you care about 13-14 year old browsers, and in those rare cases relics visit your page, handle it server-side not client side.

Is not JavaScript's job!

[pandy]

Yes, the alert is there and I get it too now, as I said. But that other message you talk about that should come before the browser is redirected to message.html, there's simply no code for that in what you posted. That's why it doesn't happen.

[Christian J]

var box9 = document.getElementById("message").value;

The "value" part above shouldn't be there, since it's added later:

if (box.value == "" || box2.value == "" || box3.value == "" || box4.value == "" || box5.value == "" || box6.value == "" || box7.value == "" || box8.value == "" || box9.value == "") {

But I agree with Jason Knight, it's much easier to use the REQUIRED attribute for client-side validation, javascript is only necessary if you have more specific requirements than what can be done with REQUIRED or PATTERN. And server-side validation is necessary for reliability and the site owner's security.

[jimbondy]

Said "tutorial" is at least a decade out of date. We call that "web rot" and it's all too common a problem.

Why is it web rot?

1) Because checking if a field is empty is none of JavaScript's business.

2) you HAVE to do the same checks again server-side since client-side can NEVER be trusted.

3) HTML now has the "required' attribute.

CODE

<input type="email" name="email" required>

Will only allow a validly formed e-mail address and "required" won't let the field submit as empty.

The only way you'd need to add scripting is if you care about 13-14 year old browsers, and in those rare cases relics visit your page, handle it server-side not client side.

Is not JavaScript's job!

Great information Jason. I did drop out my javascript and used the 'required' statement. That part now works perfectly. My real issue though is that it doesn't go anywhere when I 'submit'. I think that in the code line
[code]<form id="theForm" action="xxxxx@example.com" method="post">[code] the 'action' part would execute, thus sending it to the email address, but I don't know the syntax for the 'onsubmit' part of the code line since I removed the 'return validation' text. (or am I just wrong?)

[jimbondy]

Ok, people.
It is working as it's supposed to. I got rid of the Javascript code and the javascript target in the 'form id='...line; added in the 'required' attribute and VOILA it works. The message.html opens up with the statement "your form has been submitted" as well.
I want to thank Jason, Pandy & Christain for all of your time and assistance. You are all AWESOME!

At this point, I thought it would be a no-brainer to have the form go to my email and or an excel 'comma' spreadsheet. I've been dabbling with this but it looks like it might be another roadblock. So if anyone can help with that, it would be awesome.