1

I'm working on This Problem on the first studio of module 8 in CS50x. Basically I just want edit that label and apply the CSS with Javascript if an error is encountered, but I don't know enough about the syntax to do so. I've looked everywhere on the web and nothing has helped me break through. Any advice? I've included snippets of code that might paint you a better picture of what I need to do.

// first we get a bunch of DOM elements that we will need:

// the form
var form = document.getElementById("form-google");

// the div container that holds stuff relating to the username field
var usernameContainer = document.getElementById("field-username");

// the text input where the user shold type their name
var usernameInput = usernameContainer.querySelector("input"); // the querySelector() function gives us the first <input> child element of usernameContainer

// the div container that holds stuff relating to the search ("q") field
var searchContainer = document.getElementById('field-search'); // TODO something similar to usernameContainer

// the text input where the user types their search query 
var searchInput = searchContainer.querySelector('input'); // TODO something similar to usernameInput



// set a function that will be executed every time the form is submitted
form.onsubmit = validate(event);

clearFeedback(searchContainer);
var search = searchInput.value;
var searchIsValid = search.length > 0;
if (searchIsValid == false) {
    giveFeedback(searchContainer, "Search something!");
}

/**
 * given a container <div> and an error message, sets the child <label> to display the error message,
 * and sets the child <input> to have the "input-invalid" class so that our CSS will give it a red border
 */
function giveFeedback(container, message) {
    // TODO 
    // HINT: do something similar to clearFeedback() (see below)

}

/**
 * given a container <div>, resets the <input> and <label> inside to be "normal", ie not colored red or reporting any errors
 */
function clearFeedback(container) {
    var textInput = container.querySelector("input");
    textInput.className = "";
    var feedbackLabel = container.querySelector(".feedback-error");
    feedbackLabel.innerHTML = "";
}

<form id="form-google" action="https://www.google.com/search" method="get">
    <div id="field-username" class="container-field">
        <label>Your name:</label>
        <br/>
        <input name="username" type="text"/>
        <label class="feedback-error">EDIT THIS LABEL</label>
    </div>
    <div id="field-search" class="container-field">
        <label>Search:</label>
        <br/>
        <input name="q" type="text"/>
        <label class="feedback-error">OR THIS LABEL</label>
    </div>
    <br/>
    <input type="submit" value="Googly Moogly Search"/>
</form>

// CSS
.input-invalid {
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

.feedback-error {
    color: red;
}
1

Before you spend too much time researching this on the web, just look closely at the distribution code provided. If I recall correctly, you won't need to change the HTML or CSS files, just the JavaScript.

Look at the code for the clearFeedback() function. Straight-up copy that into the giveFeedback() function, and edit it to fit the new context.

If you look at the values you are un-setting (i.e., setting to the empty string) in the clearFeedback() function, it should be obvious to you how to apply the 'input-invalid' class name to the text input.

Don't worry about the content of the feedback error message yet -- you can pass the message variable to this function, and worry about constructing the correct string to store in that variable elsewhere.

By the way, if this answer helps you out, be sure to accept it by clicking on the green checkmark. Otherwise, the forum will leave it marked as "unanswered" forever, and it will never die! ;)

4
  • Okay, that makes sense. I think I've tried doing that, but got distracted when I noticed that I was sent to Google anyway. So perhaps I was looking into something that wasn't really a problem at all. I'm going to hold off on accepting this answer for a bit though. – NullityNull Aug 9 '16 at 22:11
  • Look around line numbers 35 - 36 of validate.js for the following tip: // uncomment the line below for debugging. Prevents the request from being sent, so you don't annoyingly have to go to google and back every time while testing // event.preventDefault(); Try uncommenting that line to prevent the default event from sending you to Google every time! – hotwebmatter Aug 9 '16 at 22:13
  • Yes that line was uncommented. I'm not sure exactly what I did differently, but it seems to have worked now. Thank you. :-) – NullityNull Aug 9 '16 at 22:17
  • Awesome. Glad I could help! – hotwebmatter Aug 9 '16 at 22:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .