Start a new topic
Answered

QV Required Fields

I've added some custom fields to our Quotevalet template, and used the class 'required' but they're not acting as required fields and are simply allowing the user to go through wihtout completing them.. do we have to explicitly tell QV these fields via javascript? I'd have thought the Javascript would simply be looking for the class name and doing the rest regardless of whether the field was custom or not? 



Best Answer

Hi Barry.


If I could venture a guess it probably has to do with the placement of the validationGroup class in relation to the fields that aren't working.


A quick bit about how the class is used first:

When you click a submit button (in this case the acceptance button) the validation code ascends the dom (from the submit button) looking for an element with the validationGroup class. Then, all form fields that are descendants of that element are included in the form validation.

 

So, if for instance you've placed these new fields outside that validationGroup (in another section for instance) then they would not be included in the form validation for the Quote Acceptance.


To correct this be sure the validationGroup class is attached to an element that is an ascendant of all the fields.


So, for example if you have two sections...wrap them in a single parent div and place the validationGroup class on that div. Then also make sure you've removed the validationGroup class from any of the descendants of that element. At this point all the fields should be included in the form validation when clicking the Acceptance button.


Hope this makes sense and helps.


Thought it might be wise to show the an example of a field:

[DH_ShipToPhone:InputType=TextBox, class="required textbox"]


I just tried this...


[DH_ShipToPhone:InputType=TextBox, class="required textbox"]


And this became mandatory, see below (ignore the field label name).

This looks to be exactly the same as what you have, so not quite sure what's going on.


Daft question, I'm sure, but you did reupload the quote after having made this change?


image



When previewing the page and "inspecting element" I can test this by adding the word "required" prior to 'textbox'. If I then try and accept, the field has become required.


image



(the last class textbox reference, not input type textbox)

Hi Matt,


Yes, quote has been re-uploaded (and also a new quote generated just in case)... 

Everything you have done, i have done, and it just acts like they're not required, except when i also add the class 'digits' (for example the phone number field).

If i add digits class and then type in letters, i get the relevant error message, if i then delete the letters so the field is blank again, then error message goes away but instead i get the 'required field' message. So it's partially working... but just not as it should me.


puzzling me this one!


When you're uploading, is there anything already in the ShipToPhone field?

No, it's blank ... 

#stumped


I'm guessing it's not browser specific, otherwise it would/wouldn't work for all fields.


Don't suppose you want to ping me over the code your HTML and I'll try it on my system to see if we get the same/different results?

Answer

Hi Barry.


If I could venture a guess it probably has to do with the placement of the validationGroup class in relation to the fields that aren't working.


A quick bit about how the class is used first:

When you click a submit button (in this case the acceptance button) the validation code ascends the dom (from the submit button) looking for an element with the validationGroup class. Then, all form fields that are descendants of that element are included in the form validation.

 

So, if for instance you've placed these new fields outside that validationGroup (in another section for instance) then they would not be included in the form validation for the Quote Acceptance.


To correct this be sure the validationGroup class is attached to an element that is an ascendant of all the fields.


So, for example if you have two sections...wrap them in a single parent div and place the validationGroup class on that div. Then also make sure you've removed the validationGroup class from any of the descendants of that element. At this point all the fields should be included in the form validation when clicking the Acceptance button.


Hope this makes sense and helps.

Hi Mike,


Thanks for the help... the additional context of how validation works made complete sense and helped a lot! thanks 


Login or Signup to post a comment