Hiya Emily.
this should work.
$(document).ready(function () {
$("form#buynowform").submit(function () {
//When the form is submitted
var elem = $("form#buynowform").children('fieldset').children('input, textarea');
var error, foc;
//Loop through each input and textarea
elem.each(function (index) {
//Does this have the class "required"?
if ($(this).hasClass('required') == true) {
//It has the class, is it empty or still have the default value?
if (!this.value || this.value == this.defaultValue) {
//Add the error class for CSS styling
$(this).addClass(" errorbuynow");
$(this).append('<p>This field is required.</p>');
//Switch the error var to true
error = true;
//If this is the first required element not filled out, save the ID
if (!foc) foc = $(this).attr("id");
} else {
//If this is filled out make sure it doesn't have the error class
$(this).removeClass("errorbuynow");
}
}
});I am using the excellent tutorial: http://numberfiveone.com/modx-tutorial-formit-with-jquery-validation to validate my Revo 2.2.6 formit form with jquery. It is all working great, but in addition to highlighting the required field in red, i also want to display a message underneath the required field (or at the beginning/end), telling the user that these are required fields. Not being a jquery expert, is anyone able to help me?
JS code:
$(document).ready(function () {
$("form#buynowform").submit(function () {
//When the form is submitted
var elem = $("form#buynowform").children('fieldset').children('input, textarea');
var error, foc;
//Loop through each input and textarea
elem.each(function (index) {
//Does this have the class "required"?
if ($(this).hasClass('required') == true) {
//It has the class, is it empty or still have the default value?
if (!this.value || this.value == this.defaultValue) {
//Add the error class for CSS styling
$(this).addClass(" errorbuynow");
//Switch the error var to true
error = true;
//If this is the first required element not filled out, save the ID
if (!foc) foc = $(this).attr("id");
} else {
//If this is filled out make sure it doesn't have the error class
$(this).removeClass("errorbuynow");
}
}
});
//If error has been switched to true
if (error) {
//Focus on the first required element that hasn't been filled out.
if (foc) $('#' + foc).css("color", "#000").css("fontStyle", "normal").focus();
//Stop the form from submitting
return false;
} else {
//Clear default values on non required elements before submit continues
if (elem.value == this.defaultValue)
this.value = "";
}
});
//Remove Default Text On Focus
$("input, textarea").focus(function() {
if( this.value == this.defaultValue ) {
this.value = "";
$(this).css("color","#000").css("fontStyle","normal");
}
}).blur(function() {
if( !this.value.length ) {
$(this).css("color","#999").css("fontStyle","italic");
this.value = this.defaultValue;
}
});
});
Thanks 
-
- 203 Posts
Hi, thanks for that, and for your quick response.
Updated as you suggested - is there something specific that i am supposed to do to the css? On validation nothing changes and no error messages are displayed. If i add in color and font-size to the buynowerror class in my css then the input fields on my form all move position implying that the js is placing the text 'This field is required' alongside the field in question.....there is no text displayed though, even if the color i specify isn't white...... Any ideas?
Do you have a live link I can look at?
Try replacing this:
$(this).append('<p>This field is required.</p>');
With this:
$(this).after('<p>This field is required.</p>');
I think that will accomplish what you want to achieve.
Also make sure the errorbuynow class has display:block otherwise the message will never be seen.
Hope that helps.
Emily, change this line of code:
$(this).removeClass("errorbuynow");
To this:
$(this).removeClass("errorbuynow");
$(this).next().remove();
That should solve your problem, again when possible post a link we can check, it will be much easier to debug.
Good luck.
-
- 203 Posts
Hi Ben,
Thanks for that - the change you suggested fixed the first instance, i.e. the first field that had the text 'This field is required' - if all fields had an error message though it keeps adding the same validation error message......
Thanks for your help
[ed. note: Emily last edited this post 11 years, 1 month ago.]
Emily,
Try changing this:
$(this).after('<p>This field is required.</p>');
To this:
if(!$(this).next().hasClass('buynowerrormsg')){
$(this).after('<p class="buynowerrormsg">This field is required.</p>');
}else{
$('.buynowerrormsg').show();
}
To hide the error message change this:
To this:
$(this).next('.buynowerrormsg').hide();
If I did it right it should take care of all your issues.
Good luck.
☆ A M B ☆
☆ A M B ☆