Make Sure Things Are Working Correctly in JavaScript with the alert() Method

My usage of JavaScript can be a bit sporadic. There are times when I go months without writing a line of JavaScript code. So I find myself forgetting how to do certain things. It also doesn't help that most of my time is spent with PHP which adds to the confusion since the languages have different aspects to them. To help get my bearings, I've used JavaScript's alert() method to quickly see things like what value a variable contains. Let's look at a simplified example showing how I use alert().

Example

To validate a form using JavaScript, I might add an "onsubmit" attribute which points to a user-defined function called validateForm().

<form method="post" action="" onsubmit="return validateForm();">
<label>Name: <input type="text" name="name" /></label>
<input type="submit" name="submit" value="Submit" />
</form>

Since I don't normally use JavaScript validation, I'll make sure the onsubmit attribute works by adding an alert() to the function definition.

<script type="text/javascript">
function validateForm() {
     alert('validateForm() was called');
}
</script>

After confirming that the attribute does indeed work, I'll define some variables. One to hold the form's input fields and another to track the error messages that come up during the validation process. Then I'll loop through the input fields.

Since the script will utilize the name and value attributes for each field, I'll use alert() to make sure the attribute values come through correctly.

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     //LOOP THROUGH THE INPUT FIELDS
     for(var i=0; i<formFields.length; i++) {
          alert('Name: ' + formFields[i].name + '\nValue: ' + formFields[i].value);
     }
}
</script>

Once satisfied, I'll finalize the loop so that an error is flagged when the Name field is left blank.

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     //LOOP THROUGH THE INPUT FIELDS
     for(var i=0; i<formFields.length; i++) {
          //IF NAME FIELD IS BLANK, FLAG ERROR
          if(formFields[i].name=='name' && formFields[i].value=='') {
               missingFields.push('Name is required');
          }
     }
}
</script>

All that's left, at least for sake of this post, is to display any submission errors…or display the thank-you message.

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     //LOOP THROUGH THE INPUT FIELDS
     for(var i=0; i<formFields.length; i++) {
          //IF NAME FIELD IS BLANK, FLAG ERROR
          if(formFields[i].name=='name' && formFields[i].value=='') {
               missingFields.push('Name is required');
          }
     }
 
     //IF MISSING ANY FIELDS, DISPLAY ERROR
     if(missingFields.length > 0) {
          alert('Please fix the following errors:\n -' + missingFields.join(' -\n'));
          return false; //prevents form submission
 
     //ELSE...FORM IS COMPLETE
     } else {
          alert('Form complete; thank you!');
          return true; //normally, this would be set to true
     }
}
</script>

Conclusion

Now, of course, the above example has been extremely simplified. In the real world, the form would likely have more fields and it would probably send the form information somewhere for further processing. However, the overall goal of this post is to demonstrate how I've leveraged JavaScript's alert() method. That way you can learn to take advantage of the method for your purposes.

Related Posts

• Check Array and Object Values in JavaScript with console.dir()