Hello,
Here is my code within (document).ready
$('.checkfirst').click(function() {
if ($(".textbox").is('.required')) {
var x = $(this).offset().top - 200;
$(this).focus();
$('html,body').animate({
scrollTop: x
}, 500);
divHint = '<div class="formHint">This is required!</div>';
$(this).before(divHint);
$(this).prev(".formHint").animate({
marginLeft: "380px",
opacity: "1"
}, 200);
} else {
$(".agreement").fadeIn();
}
});
.checkfirst
is basically the submit button.
There are various fields with a class of .textbox
, and some of them have a .required
class as well. If the person edits the input field, .required
is removed.
So when the user clicks .checkfirst
, I want it to find the required fields, put and animate the divHint
next to all of them, then scroll to the first input field that is required (giving it focus as well).
Right now I know my code just applies divHint
to the submit button (this
). I need to setup a loop somehow, and I am not sure how to do it.