Integrating jQuery validate with squiz custom forms

(Stephanie Soya) #1

Is anyone able to please point me in the direction of some documentation or instructions that show me how to apply jQuery validate to a squiz custom form?

 

I have read the jQuery validate documentation and the relevant libraries are installed in the system.

 

In the body copy section of the form I have referenced the jQuery validate script (asset number) and called the function on the form ID (shown below).

 

What else do I need to do to get it to work? 

 

<script src="./?a=1403">
 
$("#form_email_37127").validate();
 
</script>
(Nic Hubbard) #2

You would need to provide more info, such as what JS error are being thrown. And possible an example page for us to look at.

(Stephanie Soya) #3

Thanks Nic,

Another developer has just told me what was missing.

 

As there were no JS errors and the page is just a standard squiz custom form, the function was actually working.

 

However there was some missing some code to direct where and how the error was being outputted.

 

And as I suspected class="required" needs to be applied to the fields instead of just the standard squiz "required" selection.

 

The completed solution below-

 

 

<script src="./?a=1403"></script>
 
<script>
$('.form').addClass('active-validation');
 
// init validation
var validator = $('#form_email_37127').validate({
  ignore: ':hidden',
  errorPlacement: function(error, element) {
    error.appendTo(element.parents('.form-answer'));
  }
});
 
  $('.form-item .required').blur(function(){
     validator.element(this);
  });
 
</script>