processNotes.txt

Form Data Form Validation study Process Notes
=============================================

STEP 1: Create a Form
=====================
Create a form with labels and input fields.
In this case, the fields will only be for name and passwords.
Additionally, you can add an error field if the validation fails.

STEP 2: Add Logic for form validation
=====================================
This can be done two ways, with vanilla JavaScript and jQuery.

For vanilla javascript
======================
1. Select inputs (for form, name, and password)
    ----------------------------------------------------------------------------------------------------
    const name = document.getElementById('name');                       // select "name" element
    const password = document.getElementById('password');               // select "password" element
    const form = docuemnt.getElementById('form');                       // select "form" element   
    ----------------------------------------------------------------------------------------------------

2. To prevent form refreshing when you submit your form, you need to add an event listener with a event.preventDefault.
    -------------------------------------------------------------------------------------------------------
    form.addEventListener('submit', function(event) {                          
        event.preventDefault()                                          // prevent page from submitting
    });   
    -------------------------------------------------------------------------------------------------------

3. Then, create a variable called "messages" with an array which will store all our messages for the validation process.
    --------------------------------------------------------------------------------------------------------
    form.addEventListener('submit', function(event) {                        
    let messages = [];                                                   // "messages" storing all the error messages for the form validation.  
    event.preventDefault()  
    });
    --------------------------------------------------------------------------------------------------------

4. Then you need to add you if/else statements to check for the errors!  
    ---------------------------------------------------------------------------------------------------
    form.addEventListener('submit', function(event) {                        
    let messages = [];                                              // "messages" storing all the error messages for the form validation.
    if (name.value === '' || name.value == null) {                    // then check for errors... so if the name.value is equal to an empty string or null (usr didnt put in a password)
        messages.push('Name is required');
    }
    if (password.value.length <= 5 ) {                                   // if the password value is less than or equal to 5
        messages.push('Password must be longer than 5 characters');
    } 
    if (password.value.length >= 10 ) {                                 // if the password valuse is greater than or equal to 10
        messages.push('Password must be less than 10 characters');
    }
    if (password.value === 'password') {                              // if the password is "password"
        messages.push('Password cannot be "password"')
    }
    if (messages.length > 0) {                                        // if there is some error (i.e. )
       event.preventDefault()                                         // prevent page from submitting if there is an error...
       errorElement.innerText = messages.join(', ')                   // For each error shown in the error box, seperate with a comma
    }
});

    ---------------------------------------------------------------------------------------------------