Using Jquery validate EqualTo method in forms

(Ryan Archer) #1

Hi All!

 

I'm a squiz noob just getting up to speed on how it all works in my new role. I just have a small issue in regards to validating forms using the JQuery Validation method "EqualTo".

It all works fine offline but I had to devise a workaround whereby the validation function would be able to compare IDs as opposed to names as the Squiz system generates them with a colon (i.e. q2811473:q3) which breaks my javascript.

 

But anyway, the form seems to be broke now. Can't even submit it. The purpose of the form is for subscribers to change their email address and the form sends the admin the users new details via system generated email. We just want to have a repeat email input field to ensure users don't make a mistake when submitting.

 

Is there a native SQUIZ way of achieving this as I am not convinced that this Jquery solution will work. My code below:

<!-- INSERT EXTERNAL JQUERY FILES USED FOR FORM VALIDATION -->
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>

// avoids form submit

jQuery.validator.setDefaults({

debug: true,

success: “valid”

});


var form = $(’#form_email_281473’),

email1  = ‘#’+form.find(’#q281473_q2’).attr(‘id’),

email2  = form.find(’#q281473_q3’).attr(‘name’);


var r = {};

r[email2] = { equalTo: email1 };


$( “#form_email_281473” ).validate({

rules: r,

“q281473:q2”: “required”,

});


</script>


<div class=“slq-form preference-form” id=“preference-change-email-form”>


<style>

#preference-change-email-form .form-field-label { font-weight: bold; padding-right: 10px; }

#preference-change-email-form .form-field-label-note { font-weight: normal; }

/(input { border: 1px solid blue; }/

input.error { border: 1px solid red; }


</style>


<H1>Change your preferred email address</H1>


<P>Use this form to change your email address registered on our database.</P>


<P>Fields marked with a <SPAN class=“form-field-required”>*</SPAN>red asterisk are Required.</P>


<DIV class=“form-error-messages”>%form_errors_message% %form_errors%</DIV>


<div id=“preference-change-email-form-fields”>


&lt;DIV class="form-field-label"&gt;Current subscribed email  &lt;abbr class="sq-form-required-field" title="required"&gt;*&lt;/abbr&gt;:&lt;/DIV&gt;     
&lt;DIV class="form-field-box"&gt;
    &lt;!-- Current email address --&gt;
	%globals_get_cse%
    &lt;div style="display:none;"&gt;&lt;input type="hidden" name="q281473:q1" value="%globals_get_cse%" size="40" maxlength="150"  id="q281473_q1" tabindex="1" class="sq-form-field" /&gt;&lt;/div&gt;
&lt;/div&gt;       
&lt;DIV class="form-field-divider"&gt;&lt;/DIV&gt;


&lt;!-- DESIRED NEW EMAIL ADDRESS --&gt;
&lt;DIV class="form-field-label"&gt;Desired new email address: &lt;abbr class="sq-form-required-field" title="required"&gt;*&lt;/abbr&gt;&lt;/DIV&gt;     
&lt;DIV class="form-field-box"&gt;%question_field_281473_q2%&lt;/DIV&gt;
	&lt;p id="error_q281473_q2" class="sq-form-error"&gt;%question_error_281473_q2%&lt;/p&gt;
&lt;DIV class="form-field-divider"&gt;&lt;/DIV&gt; 



<DIV class=“form-field-divider”></DIV>


&lt;!-- CONFIRM DESIRED NEW EMAIL ADDRESS --&gt;    
&lt;DIV class="form-field-label"&gt;Confirm new email address: &lt;abbr class="sq-form-required-field" title="required"&gt;*&lt;/abbr&gt;&lt;/DIV&gt;     
&lt;DIV class="form-field-box"&gt;%question_field_281473_q3%&lt;/DIV&gt;
&lt;p id="error_q281473_q3" class="sq-form-error"&gt;%question_error_281473_q3%&lt;/p&gt; 
&lt;DIV class="form-field-divider"&gt;&lt;/DIV&gt;


&lt;!-- Subscriber ID --&gt;
&lt;INPUT id="q281473_q4" value="%globals_get_reid%" type="hidden" maxLength="50" name="q281473:q4"&gt;
&lt;p id="error_q281473_q4" class="sq-form-error"&gt;%question_error_281473_q4%&lt;/p&gt;

&lt;!-- SECURITY KEY --&gt;
&lt;DIV class="form-field-label"&gt;Security key&lt;SPAN class="form-field-required"&gt;*&lt;/SPAN&gt;&lt;BR&gt;
    &lt;DIV class="form-field-label-note form-field-label-note-indent"&gt;Please enter the letters from the large box here into the small box below it. This helps us prevent spamming.&lt;/DIV&gt;
&lt;/DIV&gt;     
&lt;DIV class="form-field-box"&gt;%form_captcha_image%&lt;BR&gt;%form_captcha_field%&lt;BR&gt;%form_captcha_link% &lt;/DIV&gt; 
&lt;p class="sq-form-error"&gt;%form_captcha_errors%&lt;/p&gt;
&lt;DIV class="form-field-divider"&gt;&lt;/DIV&gt; 

&lt;DIV class="form-field-box"&gt;&lt;span class="form-field-button-submit"&gt;%submit_button%&lt;/span&gt;&lt;span class="form-field-button-reset" style="MARGIN-LEFT: 25px"&gt;%reset_button%&lt;/span&gt;&lt;/DIV&gt; 

&lt;DIV class="form-field-divider"&gt;&lt;/DIV&gt;



</div> <!-- /#preference-change-email-form-fields -->


<P>&nbsp;</P>


</div>
(Ryan Archer) #2

I get the feeling I am on an uphill battle with this.

There must be a native SQUIZ Matrix way on validating two forms to check whether they have the same data in them?

 

Has anyone got any suggestions?

(Peter McLeod) #3

Hi

 
In terms of native Matrix options:
  • have a look at the 'Add Rule' option for the field - then the 'Value Comparison' and set to equal the other email field asset.
Using jquery:
 
For custom form body copies I tend to wrap %%question_field_...%  in standard wrapper elements.
 
Then for any JS events you need do stuff for, you access the inputs via the generic parent classes.
 
This removes the need for knowing what the matric id's are - which also lets you reuse the JS accross other forms if needed
 
Just an example, using just Jquery without the validate plugin...
Assumes you have just single 'input' elements
Validation is trigger when submit button is clicked
 
$('.your-submit-button-wrapper input[type="submit"]').on("click", function(e) {
  var x1 = $(".your-input-wrapper-1 input").val(),
      x2 = $(".your-input-wrapper-2 input").val();
  if(x1 != x2){
    e.preventDefault();
    //do error message display actions etc...
  } 
});

Peter

(Anthony Barnes) #4

I think the solution to this is simpler than you think. The jQuery.validate.equalTo method accepts a jQuery selector as the argument so all you would need to get your example working is to use the id. Something like the following:

 

$( "#form_email_281473" ).validate({

    rules: {
   "q281473:q3": {
       equalTo: "#q281473_q2"
    },

    "q281473:q2": "required"   }

});

 

We use the jQuery.validate library extensively for client side form validation to prevent round trips to the server and the example you are looking at is usually implemented to improve password entry for account manager assets.

 

Just a side note about "required": jQuery validate supports automatic validation on attributes applied to the form tags, so if you set "required" in the Matrix configuration for the question it will output with the correct attribute and be picked up automatically by jQuery validate. No need to set it in the options passed to $.validate(...)

(Ryan Archer) #5

Thanks everyone for you help! I ended up going with @PeterM's solution and doing it natively inside SQUIZ Matrix.

It creates a javascript alert box that lets me customise the alert information given to user. Not as pretty as JQuery validate solution but I had some real troubles with jquery.

 

I did try and use exactly the same script as you Anthony and it just went all pear shaped (be good if object names did not have a colon in them) - so that's why I used a more complex method. Still did not yield results anyway. Where I'm employed (SLQ), they are using the jquery 1.7.1 library so maybe its a bit outdated. Not really sure.

 

Needed a JIT solution and doing it in SQUIZ did the job for me. Will experiment more with Jquery client side validation when i have a bit more time.