Refactoring Submit Button Form Project I Created

Question

I built a small project using a submit button that detects if the input fields are blank and warns the user, else it lets the user know the message was successfully sent.

I am going back to refactor and improve my code, and maybe add a few additional features but im struggling a bit such as:

1) Changing to once the form is submitted, the form input fields are reset and go back to being blank.

2) At the moment if you leave fields blank, it gives you a separate alert box for each form you leave blank. Its sort of annoying having 2 or more alerts pop up one after another. I am trying to figure out a way to change it such that there is only one alert and it notifies you of each field that was left empty.

The codepen is here http://codepen.io/bluehabit/pen/NPMWmZ

 var $firstName = $('#first_name');
 var $lastName = $('#last_name');
 var $email = $('#email');

    $('.btn-submit').click(function(event){
    event.preventDefault();

    var $fnVal = $firstName.val();
    var $lnVal = $lastName.val();
    var $eVal = $email.val();

    if( $fnVal == ''){
      alert( 'please fill out the first name' );
    }
    if( $lnVal == ''){
      alert( 'please fill out the last name' );
    }
    if( $eVal == '' ){
      alert( ' we need your email address to send you a cat' );
    }

    if( $fnVal && $lnVal && $eVal ){
      alert( 'Thank you! Your message has been sent!' )
    }

});

In the final else statement I tried to manually set the values for fnVal, lnVal and eVal back to '' so the form would be blank again, but haven't had much luck with it.

Would greatly appreciate any tips, thank you.

Answer 1 · 2015-02-21T20:26:58Z

February 21, 2015 8:26pm

This would work. Just use an array for the errors and set the values to an empty string on the strings:

var $firstName = $('#first_name'),
    $lastName = $('#last_name'),
    $email = $('#email');

var showErrors = function(e){
  return e.join('\n');
}

$('.btn-submit').on('click', function(e){

    e.preventDefault();

    var formErrors = [];

    if( !$firstName.val() ){
        // push error to array
        formErrors.push( '* Please fill out the first name.' );
    }

    if( !$lastName.val() ){
        // push error to array
        formErrors.push( '* Please fill out the last name.' );
    }

    if( !$email.val() ){
        // push error to array
        formErrors.push( '* We need your email address to send you a cat.' );
    }

    if( formErrors.length === 0 ){
        alert( 'Thank you! Your message has been sent!' );
        // reset
        $firstName.val("");
        $lastName.val("");
        $email.val("");
    }else{
        alert( showErrors( formErrors ) );
    }

});

Answer 2 · 2015-02-21T20:38:22Z

February 21, 2015 8:38pm

Thank you very much @LaVaughn Haynes!

Welcome to the Treehouse Community

Looking to learn something new?

Chris Feltus

Chris Feltus

Refactoring Submit Button Form Project I Created

2 Answers

LaVaughn Haynes

LaVaughn Haynes

Chris Feltus

Chris Feltus