Form error and success messages to load via ajax

Paul,

This would require a good deal of refactoring with the from submission and display function. Firstly, the processing of the POST data from the form submission would need to be abstracted to it’s own function so as to be able to be called via ajax separate from within the form display. Secondly, the form display and error handling would also need minor adjustments to return appropriate markup.

This is a common feature request that we have simply not gotten around to implementing yet. We have been in the middle of a significant refactor and need to get that out o first before adding any new functionality. Perhaps this is something we can set our sight on next.

Thanks,
Charlie Maxwell
[NM_ Developer]

Yes, I would love to see this in a future update.

Thank you Charlie

Ajax functionality needs to be added to the core of this plugin, but in the meantime this code will cause validation errors to display without reloading the page.

The jQuery Validate plugin is needed for this code to work.

// add "required" attribute to the inputs and textareas that should be required
$('.rr_review_form .rr_required + .rr_form_input > input, .rr_review_form .rr_required + .rr_form_input > textarea').attr('required', 'required');

// [IF USING STARS] add an input so stars can be validated
$('.rr_stars_container').append('<input type="checkbox" name="input_stars" style="opacity: 0;">');

// [IF USING STARS] add a function to remove error when stars are selected
$('.rr_stars_container').click(function() {
	if ($('.rr_stars_container').find('.glyphicon-star').length > 0) {
		$('input[name="input_stars"]').removeClass('error');
		$('label#input_stars-error').hide();
	}
});

// [IF USING STARS] add a method to the validate plugin to check for a stars rating
$.validator.addMethod("selectStars", function(value, element) {
	return $('.rr_stars_container').find('.glyphicon-star').length > 0;
}, "Please rate this product.");

// validate the form
$('.rr_review_form').validate({
	// [IF USING STARS] add a method to the validate plugin to check for a stars rating
	rules : {
		input_stars : { selectStars : true }
	}
});

You can also submit the form via ajax by using Malsup’s jQuery Form Plugin along with the jQuery validate code provided above.

$('.rr_review_form').validate({
	rules : {
		input_stars : { selectStars : true }
	},
	submitHandler : function(form) {
		// prepare the form for ajax submission
		$(form).ajaxForm({
			success : function() {},
		});

		// submit the form via ajax
		$(form).ajaxSubmit();

		// do your post submission tasks here, like hiding the form and displaying a success message.
		// [NOTE: this really should be in "success" callback parameter, but for some reason that won't fire.]

		// prevent the default submit
		return false;
	}
});