Web programming TipsBy Sergey Skudaev
I used different methods for form validation. This one I like the most. It takes all fields on the form and walk through.
To see source code, click on the webpage with right mouse button and select view source code.
I like this method, because it works even on fields created by cloning with javascipt. When you create an array of fields by clonning them with JavaScript, you cannot know index of the array for each field. It makes hard to write validate code by reference each field in the array. This method allows to validate all fields on the form. Just use name of the element to identify a field.
If a field is blank, its border turns red and its bsckground color turns yellow or orange. I do not use the "required" attribute on purpose for the better demonstration of the JavaScript function. In the real life, you should use the required attribute. Also, I do not validate the format of the entered data. You can find examples of that in Google.
In the first example of JavaScript validation function, I use style object. The whole code is in the text area below
JavaScript code for validation
The toDefault(x) function returns style properties back to default values.
Below in the text area is markup for the form.
HTML Form:
Some developers argue that using style object and changing its properties is not the best way to manipoulate DOM with JavaScript because it mixes behavior and presemtation.
It is said that structure, presentation and behavior should be pure. However, the-separation-of-structure-presentation-and-behavior-is-dead
Anyway, below I presented a different approach to changing the border and backgorund color while performing the form validation.
In the new validation function, I adding to the element that failed validation, a CSS class that changes the border and the background color. When visitor clicks inside the field, on the focus event, the class is removed and the border and the background color change back to default.
Our dog needs urgent surgery, and the cost is overwhelming.
Any help, big or small, would mean the world to us. Thank you for supporting Oscar on his journey to recovery!
Oscar Story.
Oscar wasn’t just any puppy—he was a gift from a mother who trusted us with her smallest one.
For five years, my wife worked at the Indian Medical Center in Arizona, deep in Navajo Nation. Near her clinic, she often saw a homeless dog wandering the area. Over time, she began feeding her, and the dog grew fond of her. Then, one day, that same dog brought her newborn puppies to my wife—as if proudly showing them off.
Among them was the smallest, most delicate pup. My wife couldn’t resist. She brought him home, and we named him Oscar.
Oscar thrived in the house provided by the medical center, enjoying the big backyard where he lived. I built him a sturdy wooden doghouse, and we often took him on walks along the Window Rock Trail. He became our adventure companion, making the vast desert feel like home.
After my wife’s contract ended, we moved back to Florida, bringing Oscar with us. He adjusted to his new surroundings, but he never lost his adventurous spirit.
Now, Oscar faces a tough challenge—he needs urgent surgery, and the cost is overwhelming. We want to give him the best care possible, just as he’s given us years of joy and loyalty.
Any help, big or small, would mean the world to us. Thank you for supporting Oscar on his journey to recovery!
