Change to Modern orderform template

[erwin123]

We switched today to the Modern orderform.

 

It is crucial for our domainregistrar that the telephonenumber is given in a specific format of 10 digits without - or countrycodes.

 

We tried to enforce this by changing:

 

                                <label for="phonenumber" class="control-label">{$LANG.clientareaphonenumber}</label>
                               <input type="text" name="phonenumber" id="phonenumber" value="{$clientsdetails.phonenumber}" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

 

to

 

                                <label for="phonenumber" class="control-label">{$LANG.clientareaphonenumber}</label>
<tr><td><font color="#FF0000"><b>Let op!</b></font></td><td> voer telefoonnummer in als<br>0201234567 <b>dus zonder +31 of -</b></td></tr>
                               <input type="text" value="0687654321" maxlength="10" name="phonenumber" id="phonenumber" value="{$clientsdetails.phonenumber}" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

 

For some unknown reason this breaks the cart for any other extention then .nl

I hope someone can show me how to do this properly.

 

Thank you in advance!

[brian!]

For some unknown reason this breaks the cart for any other extention then .nl

possibly because you're not in a table, so can't really use <tr><td> !

 

I hope someone can show me how to do this properly.

the quick way, which should work in all modern browsers (except perhaps Safari ), would be to use patterns.

 

<input type="text" name="phonenumber" id="phonenumber" {literal}pattern="[0-9]{10}"{/literal} placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" value="{$clientsdetails.phonenumber}" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

 

and then if you try to submit the form without a 10-digit phonenumber...

or if you need the output to be in Dutch...

 

<input type="text" name="phonenumber" id="phonenumber" {literal}pattern="[0-9]{10}"{/literal} placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" value="{$clientsdetails.phonenumber}" oninvalid="setCustomValidity('Gelieve het gewenste formaat aan te passen ')" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

 

 

 

or if you needed it to be in the current language, you could use Language Overrides inside setCustomValidity.

 

the alternative would be to use some js/jquery, but the above patterns solution should be sufficient for your situation.

[erwin123]

This is very helpful.

Thank you very much for the excellent support!

[erwin123]

Sorry to bother but there seems to be something wrong with the string.

 

I get the warning about filling in the number in the right syntax no matter how many numbers I fill in.

Is there perhaps something missing in the code?

 

<input type="text" name="phonenumber" id="phonenumber" {literal}pattern="[0-9]{10}"{/literal} placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" value="{$clientsdetails.phonenumber}" oninvalid="setCustomValidity('Voer uw tien cijferig telefoonnummer in ')" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

[brian!]

see if the code below is any better...

 

<input type="text" name="phonenumber" id="phonenumber" pattern="[0-9]{literal}{10}{/literal}" placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" oninvalid="setCustomValidity('Voer uw tien cijferig telefoonnummer in ')" oninput="setCustomValidity('')" value="{$clientsdetails.phonenumber}" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

it's the setCustomValidity parts that are the problem - take them out and it will definitely work... but will always be in English.

[erwin123]

Unfortunatly its worse:)

The form won't finish the domain availability check but keeps waiting.

 

                                <label for="phonenumber" class="control-label">{$LANG.clientareaphonenumber}</label>
<input type="text" name="phonenumber" id="phonenumber" pattern="[0-9]{literal}{10}{/literal}" placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" oninvalid="set$
                           {/if}

 

I've searched for a typo or missing bracket etc. but if there is any I don't see it.

 

I could take the setCustomValidity out but the problem is once they entered a wrong format phonenumber they can't see anymore what the right format should be because the hint is gone.

[brian!]

Unfortunatly its worse:)

The form won't finish the domain availability check but keeps waiting.

3 things...

 

1. i'm assuming you're putting this code in modern/viewcart.tpl - if so, i'm not seeing it in the source code when I look at your cart.

2. also, what's domain availability got to do with this code? by the time you get to viewcart, it's the end of the process and the client have long finished their domain searches.

3. I don't think you've copied all the code I posted - i'll post it again using a code box so that it doesn't scroll downwards..

 

[color=#000000][color=#007700]<[/color][color=#0000BB]input type[/color][color=#007700]=[/color][color=#DD0000]"text" [/color][color=#0000BB]name[/color][color=#007700]=[/color][color=#DD0000]"phonenumber" [/color][color=#0000BB]id[/color][color=#007700]=[/color][color=#DD0000]"phonenumber" [/color][color=#0000BB]pattern[/color][color=#007700]=[/color][color=#DD0000]"[0-9]{literal}{10}{/literal}" [/color][color=#0000BB]placeholder[/color][color=#007700]=[/color][color=#DD0000]"Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" [/color][color=#0000BB]oninvalid[/color][color=#007700]=[/color][color=#DD0000]"setCustomValidity('Voer uw tien cijferig telefoonnummer in ')" [/color][color=#0000BB]oninput[/color][color=#007700]=[/color][color=#DD0000]"setCustomValidity('')" [/color][color=#0000BB]value[/color][color=#007700]=[/color][color=#DD0000]"[/color][color=#007700]{[/color][color=#0000BB]$clientsdetails[/color][color=#007700].[/color][color=#0000BB]phonenumber[/color][color=#007700]}[/color][color=#DD0000]" [/color][color=#007700]class=[/color][color=#DD0000]"form-control"[/color][color=#007700]{if ![/color][color=#0000BB]in_array[/color][color=#007700]([/color][color=#DD0000]'phonenumber'[/color][color=#007700], [/color][color=#0000BB]$clientsProfileOptionalFields[/color][color=#007700])} [/color][color=#0000BB]required[/color][color=#007700]{/if} />[/color][/color]

I could take the setCustomValidity out but the problem is once they entered a wrong format phonenumber they can't see anymore what the right format should be because the hint is gone.

worst case, you could remove the placeholder and put it back as descriptive text - that way they can always see what the format should look like... but I think the above code should work.

 

also, another option would be to drop the setCustomValidity code and use title="some dutch text" instead, but that would be shown in addition to the English error and not replace it.

 

<input type="text" name="phonenumber" id="phonenumber" pattern="[0-9]{literal}{10}{/literal}" placeholder="Let op! voer telefoonnummer in als 0201234567 dus zonder +31 of -" title="Voer uw tien cijferig telefoonnummer in" value="{$clientsdetails.phonenumber}" class="form-control"{if !in_array('phonenumber', $clientsProfileOptionalFields)} required{/if} />

[erwin123]

You could'nt see the code because I copied the orderform to a alternative directory and switched to it for experimenting.

After I tried I switched back.

 

I thought it worked but it didn't.

If you only order a domain its fine but add hosting and it hangs.

 

I tried the second option, but it does exactly the same, it hangs after adding hosting.

Edited July 14, 2017 by erwin123

[brian!]

You could'nt see the code because I copied the orderform to a alternative directory and switched to it for experimenting.

After I tried I switched back.

 

I thought it worked but it didn't.

If you only order a domain its fine but add hosting and it hangs.

 

I tried the second option, but it does exactly the same, it hangs after adding hosting.

i'm more inclined to think that's being caused by you using a copied orderform and trying to do your experimenting with that... the content of the cart is not going to make a difference to this, but using a custom/renamed cart might.

 

try it on the working live "modern" template, and if you still have the same problem after doing that, then get back to me!

[erwin123]

Hi Brian,

 

You are totally right.

 

I thought copying the files to a alternative directory was the way to go.

It prevents the files to be overwritten with the next update, guess I'll have to make a extra copy of the file.

 

Anyway it works like a charm now, thank you very much!

[brian!]

I thought copying the files to a alternative directory was the way to go.

It prevents the files to be overwritten with the next update, guess I'll have to make a extra copy of the file.

no it's absolutely fine to copy an orderform theme and rename it...

 

where you can sometimes have problems is trying to use a custom template for testing when it isn't being used as your default order form template - so, if you made your copied template the default orderform template, it would work fine; if you modified 'Modern' and it was still your default template, then I was fairly certain it would work.

 

you can continue to use your copied theme and call it something other than 'Modern' to avoid update issues - just so long as it's the default template (if you're continuing to test it).

 

btw - if you got your license directly from WHMCS, you can always contact them for a developers license for free - that will allow you to have a second WHMCS installation (for testing purposes only) and test these template changes while not affecting the live site.

 

Anyway it works like a charm now, thank you very much!

good to hear - I was beginning to question my own sanity!