Meaning of JavaScript form validation code?

Question

I have to explain how a specific Javascript code validates a web form, but I am stuck with what some of the features do, most specifically this section of the code. I understand that the first line defines that the rest of the section should only run if the field Field1 of the form ExampleForm is left empty, but I do not know what purpose the rest of the code serves. All I know is that msg is a variable created earlier in the document with an empty default value, and that result is another variable with a default value of true. Can anyone help me out by explaining what each line does?

if (document.ExampleForm.Field1.value=="") {
msg+="You must enter your name \n";
document.ExampleForm.name.focus();
document.getElementById('Field1').style.color="red";
result = false;
}

Note that curved quotation marks, as you've posted here, aren't valid string literal delimiters in JavaScript. — Jonathan Lonowski
– Jonathan Lonowski, Commented Sep 23, 2014 at 18:33

Sterling Archer · Accepted Answer · 2014-09-23 18:29:02Z

2

In plain english:

If the document form field value is equal to an empty string, set the error message to msg, then focus on the element, and give is a red color so the user knows it's an error, and set the result to false, for whatever you're going to use that for later in your code/function.

answered Sep 23, 2014 at 18:29

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Wold Over a year ago

Even though this is an overview, OP asked for a line by line description of what the code does.

Sterling Archer Over a year ago

It's literally a line by line explanation..?

Wold Over a year ago

Sorry I guess I was just being picky with his language.

George Mauer Over a year ago

It does not set the error message, it appends. It also appends in a way that won't display multiple messages properly outside of a <pre> element

George Mauer · Accepted Answer · 2014-09-23 18:40:45Z

0

So this would in part depend on what other code is on the page. For example document.ExampleForm is not part of the DOM and seems to be something someone kludged onto your page.

Overall I would say this is pretty bad code that makes a ton of assumptions that won't necessarily hold up written by someone who doesn't understand in-browser javascript very well, but let's go with it

//if the value in this variable is falsy (false, empty, or 0)
if (document.ExampleForm.Field1.value=="") {
    //Append this to the msg string. Note \n is usually used 
    //to indicate "new line" but wont' do anything on the web since that's not how line breaks
    //work on the web
    msg+=”You must enter your name \n”;
    //Invoke the `focus` field on this variable. From the context I assume this is
    //a DOM node so you are basically focusing it in the browser
    document.ExampleForm.name.focus();
    //Set the font color of '#Field1' to red
    document.getElementById('Field1').style.color=”red”;
    //Presumably result is something that tells you true/false did the validation succeed.
    //set it to false to indicate failure.
    result = false;
}

My guess about what document.ExampleForm is that it depends on some undocumented behavior of an old browser to add anything with id=ExampleForm to the document element. But really I have no idea. Maybe you have some code elsewhere that creates that variable. Either way its a horrible idea and should get someone yelled at.

edited Sep 23, 2014 at 18:40

answered Sep 23, 2014 at 18:33

George Mauer

123k140 gold badges400 silver badges632 bronze badges

2 Comments

user3212924 Over a year ago

sorry - an error on my part with the exampleform and examentry! i've just amended the code

George Mauer Over a year ago

Ok, answer adjusted but the specifics are all the same

Collectives™ on Stack Overflow

Meaning of JavaScript form validation code?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related