Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Rodney Wormsbecher
Rodney Wormsbecher
2,847 Points

javascript form validation, weird error...

hey everyone, I was trying to apply some jQuery techniques similar to the ones on treehouse but with my own project. I got it almost working bu somehow it doesnt pass my last test to un-disable the submit button.

below is an extract of my javascript code:

var name;
var email;
var question;

// when page loads disable submit button and hide errors
$(document).ready(function() {
    console.log("hello");
    $("#RwNameError").hide();
    $("#RwEmailError").hide();
    $("#RwQuestionError").hide();
    $("#RwFormSubmit").prop('disabled', true);
});

// check whther the input is as desired, if not pop up error message.
// get the values from the input boxes and trim them
$("#RwNameInput").blur(function () {
    if ($(this).val().trim() === "") {
        $("#RwNameError").show();
        name = "";
    } else {
        $("#RwNameError").hide();
        name = $("#RwNameInput").val().trim();
    }
});


$("#RwEmailInput").blur(function() {
    var pattern =  /\S+@\S+\.\S+/;

    if ( $(this).val() == "" || !pattern.test( $(this).val() ) ) {
        $("#RwEmailError").show()
        email = "";
    } else {
        $("#RwEmailError").hide();
        email = $("#RwEmailInput").val();
    }
});


$("#RwContentInput").blur(function() {
    if ( $("#RwContentInput").val().trim() === "") {
        $("#RwQuestionError").show();
        question = "";
    } else {
        $("#RwQuestionError").hide();
        question = $("#RwContentInput").val();
    }
    console.log(name);
    console.log(email);
    console.log(question);
});

// if all error messages are and all input has content unlock submit button
if ( (name !== "") && (email !== "") && (question !== "") )   {
    $("#RwFormSubmit").prop('disabled', false);
}

and here's the html

 <form action="" method="post">
                    <div id="RwNameError" >
                        <p class="RwError">You must enter a name.</p>
                    </div>
                    <span class="form-group">
                        <label  for="name">Full name: </label>
                        <input type="text" name="name" class="form-control" id="RwNameInput" />
                    </span><br>
                    <div id="RwEmailError">
                        <p>Invalid email address.</p>
                    </div>
                     <span>
                        <label for="email">Email: </label>
                        <input type="text" name="email" class="form-control" id="RwEmailInput" />
                    </span>
                    <div id="RwQuestionError" class="RwError">
                        <p>You must enter a question or comment..</p>
                    </div>
                     <span><br>
                        <label for="content">Question/comment: </label>
                         <textarea rows="7" cols="20" name="content" class="form-control"id="RwContentInput"></textarea>

                    </span><br>
                    <span>
                        <input type="submit" name="submit" class="form-control btn RwDarkOrange"  value="send email" id="RwFormSubmit">
                    </span><br>

                </form>

The name, email and question all have values in the console, which makes me clueless of what I'm doing wrong.

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I found these issues:

  • JQuery was never loaded (but perhaps you just left that out)
  • you only tested the state of the inputs once, as the script loads
  • you were testing your variables for empty strings, but did not pre-set them that way

I moved the input test into a function named validate, and then called from each input blur function. I changed the test from checking for empty strings to just checking "falsiness" (both empty and undefined are "falsey"):

var name;
var email;
var question;

// when page loads disable submit button and hide errors
$(document).ready(function() {
  console.log("hello");
  $("#RwNameError").hide();
  $("#RwEmailError").hide();
  $("#RwQuestionError").hide();
  $("#RwFormSubmit").prop('disabled', true);
});

// check whther the input is as desired, if not pop up error message.
// get the values from the input boxes and trim them
$("#RwNameInput").blur(function() {
  if ($(this).val().trim() === "") {
    $("#RwNameError").show();
    name = "";
  } else {
    $("#RwNameError").hide();
    name = $("#RwNameInput").val().trim();
  }
  validate();
});

$("#RwEmailInput").blur(function() {
  var pattern = /\S+@\S+\.\S+/;

  if ($(this).val() == "" || !pattern.test($(this).val())) {
    $("#RwEmailError").show()
    email = "";
  } else {
    $("#RwEmailError").hide();
    email = $("#RwEmailInput").val();
  }
  validate();
});

$("#RwContentInput").blur(function() {
  if ($("#RwContentInput").val().trim() === "") {
    $("#RwQuestionError").show();
    question = "";
  } else {
    $("#RwQuestionError").hide();
    question = $("#RwContentInput").val();
  }
  validate();
  // I assume you won't need these anymore
  //console.log(name);
  //console.log(email);
  //console.log(question);
});

function validate() {
  // if all error messages are and all input has content unlock submit button
  if (name && email && question) {
    $("#RwFormSubmit").prop('disabled', false);
  }
}