-
-
Save airtwo/8887041 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
// TASK 1: | |
// When the submit button is clicked, any empty | |
// input fields should gain a red border. | |
// ----- | |
// Capture submit event. | |
// Create alert on submit | |
// Prevent submit from occurring | |
// Grab all text inputs | |
// Output list of inputs to console | |
// Loop through all inputs | |
// Output a "got it" to console for each one | |
// For each input, grab value | |
// Output value to console | |
// Test if value is empty | |
// If it's empty, output "empty!" to console | |
// If it's empty, output the field itself to console | |
// Create new CSS class for showing empty field | |
// Hard-code it onto one field to test it | |
// Refresh. If it works, remove the hard-coded class. | |
// Back to JS loop. If field is empty, give it the class you defined above | |
// ----- | |
// TASK 2: | |
// When a user clicks off of an empty input field, | |
// it should gain a red border. | |
// ----- | |
// ----- | |
// TASK 3: | |
// When a user enters text in an empty field with the | |
// red border, the red border should disappear (when field | |
// loses focus). | |
// ----- | |
$("input").blur(function() { | |
var value = $(this).val(); | |
if ($.isEmptyObject(value)) { | |
$(this).addClass("empty"); | |
} | |
else { | |
$(this).removeClass("empty"); | |
} | |
}); | |
// ----- | |
// TASK 4: | |
// When submitting a successful form, post it to | |
// tsljs.herokuapp.com/YOURNAME. If it works, post | |
// alert (use classes "alert" and "alert-success") | |
// on the page, saying it worked. | |
// ----- | |
$("form").submit(function(x) { | |
x.preventDefault(); | |
var inputs = $('input[type=text]'); | |
inputs.each(function() { | |
var value = $(this).val(); | |
if ($.isEmptyObject(value)) { | |
$(this).addClass("empty"); | |
} | |
}); | |
}); | |
$.post("http://tsljs.herokuapp.com/chanceandlukas", { | |
name: "Lukas and chanceandlukas", | |
email: "lukas@brasi.com", | |
username: "lukas", | |
gender: "M" | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment