drewz.ua,
Ajax form submission is something that we have wanted to implement for a while now, unfortunately at the moment the plugin doesn’t not support ajax form submission. We are currently in the process of wrapping up a large update. Once we get this update pushed out, hopefully ajax is one of the things we can look to implement next.
Thanks,
Charlie Maxwell
[NM_Developer]
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;
}
});
