FormBuilder: Add class to field instead of containing DIV

[admsh]

I'm trying to add jquery validation to a form instead of using formbuilder's built in validation. Problem is the validation plugin identifies required fields by their class (.required), and FormBuilder adds a class to the DIV containing the form elements...

Tried looking in the form template but can't find the solution there...

Any help would be hugely appreciated...

[Foaly*]

this isn't possible without either hacking the core or using a dirty reeplace modifier solution. are you sure there is no option to change jquery's selector from .required to .required input?

[admsh]

yes, i'm sure. one can specify the fields to validate using their name attribute, but then making a field required in formbuilder's back-end makes no difference on the validation...

if the fields themselves got the "required" class attached to them, no other code would be needed...

[Foaly*]

I'd not suggest to use one of the above-mentioned solutions. What validation plugin are you using?

[admsh]

this one:
http://docs.jquery.com/Plugins/validation

if the required class could be added to the form element, it would look like this:

Code: Select all

 <__script__>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
 </__script>

as it is now it would have too look like this:

Code: Select all

<__script__>
  $(document).ready(function(){
    $("#commentForm").validate({
        $.validator.classRuleSettings = {
	mandatory: {required:true}, //originally required
	email: { email: true },
	url: { url: true },
	date: { date: true },
	dateISO: { dateISO: true },
	dateDE: { dateDE: true },
	number: { number: true },
	numberDE: { numberDE: true },
	digits: { digits: true },
	creditcard: { creditcard: true }
        };
    });
  });
 </__script>

[Foaly*]

it seems to me that you are right.. that's strange that there's no option that defines the required class name.

[optart]

you can do it also via script:

jQuery("#formID").addClass(function() {
return $(this).parent('div').attr('class')});

[dmgd]

This works for the default formbuilder style.

Code: Select all

 <__script__ type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></__script>
<__script__>
{literal}
  $(document).ready(function(){
           $("input").each(function() {
                  if( $(this).parent().hasClass("required") ) {
                       $(this).addClass("required");
                   }
            });
 });
{/literal}
</__script>