public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add client side HTML5 validation of required fields

Browse source
This commit is contained in:
Lawrence Elitzer 2020-08-31 09:16:06 -05:00
parent 1914591f46
commit 98a7a744fc
6 changed files with 22 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

5
server/models/fields.js
View file

@ -663,6 +663,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
help: fld.help, help: fld.help,
field: fld, field: fld,
[type.getHbsType(fld)]: true, [type.getHbsType(fld)]: true,
required: fld.required,
order_subscribe: fld.order_subscribe, order_subscribe: fld.order_subscribe,
order_manage: fld.order_manage order_manage: fld.order_manage
}; };
@ -689,6 +690,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
key: opt.key, key: opt.key,
name: opt.name, name: opt.name,
help: opt.help, help: opt.help,
required: opt.required,
value: isEnabled value: isEnabled
}); });
} }
@ -704,7 +706,8 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
key: opt.key, key: opt.key,
name: opt.label, name: opt.label,
help: opt.help, help: opt.help,
value: value === opt.key value: value === opt.key,
required: fld.required
}); });
} }

32
server/views/subscription/partials/subscription-custom-fields.hbs
View file

@ -18,7 +18,7 @@
{{#if typeText}} {{#if typeText}}
<div class="form-group text {{key}}"> <div class="form-group text {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="text" name="{{key}}" value="{{value}}"> <input type="text" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -26,7 +26,7 @@
{{#if typeNumber}} {{#if typeNumber}}
<div class="form-group number {{key}}"> <div class="form-group number {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="number" name="{{key}}" value="{{value}}"> <input type="number" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -34,7 +34,7 @@
{{#if typeWebsite}} {{#if typeWebsite}}
<div class="form-group url {{key}}"> <div class="form-group url {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="url" name="{{key}}" value="{{value}}"> <input type="url" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -42,7 +42,7 @@
{{#if typeLongtext}} {{#if typeLongtext}}
<div class="form-group longtext {{key}}"> <div class="form-group longtext {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<textarea rows="3" name="{{key}}">{{value}}</textarea> <textarea rows="3" name="{{key}}" {{#if required}} required {{/if}}>{{value}}</textarea>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -50,7 +50,7 @@
{{#if typeJson}} {{#if typeJson}}
<div class="form-group json {{key}}"> <div class="form-group json {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{&quot;data&quot;:&quot;value&quot;}">{{value}}</textarea> <textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{&quot;data&quot;:&quot;value&quot;}" {{#if required}} required {{/if}}>{{value}}</textarea>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -59,7 +59,7 @@
<div class="form-group checkbox"> <div class="form-group checkbox">
<label>{{name}}</label> <label>{{name}}</label>
<label class="label-checkbox"> <label class="label-checkbox">
<input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}}> {{field.settings.checkedLabel}} <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{field.settings.checkedLabel}}
</label> </label>
<input type="hidden" value="0" name="{{key}}"> <input type="hidden" value="0" name="{{key}}">
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
@ -72,7 +72,7 @@
{{#if ../hasPubkey}} {{#if ../hasPubkey}}
<button class="btn-download-pubkey" type="submit" form="download-pubkey">{{#translate}}downloadSignatureVerificationKey{{/translate}}</button> <button class="btn-download-pubkey" type="submit" form="download-pubkey">{{#translate}}downloadSignatureVerificationKey{{/translate}}</button>
{{/if}} {{/if}}
<textarea class="form-control gpg-text" rows="4" name="{{key}}" placeholder="{{#translate}}beginsWithAnd#39BeginPgpPublicKeyBloc{{/translate}}">{{value}}</textarea> <textarea class="form-control gpg-text" rows="4" name="{{key}}" placeholder="{{#translate}}beginsWithAnd#39BeginPgpPublicKeyBloc{{/translate}}" {{#if required}} required {{/if}}>{{value}}</textarea>
<small class="form-text text-muted">{{#translate}}insertYourGpgPublicKeyHereToEncrypt{{/translate}}</small> <small class="form-text text-muted">{{#translate}}insertYourGpgPublicKeyHereToEncrypt{{/translate}}</small>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
@ -81,7 +81,7 @@
{{#if typeDateUs}} {{#if typeDateUs}}
<div class="form-group date fm-date-us {{key}}"> <div class="form-group date fm-date-us {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="text" name="{{key}}" placeholder="MM/DD/YYYY" value="{{value}}"> <input type="text" name="{{key}}" placeholder="MM/DD/YYYY" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -89,7 +89,7 @@
{{#if typeDateEur}} {{#if typeDateEur}}
<div class="form-group date fm-date-eur {{key}}"> <div class="form-group date fm-date-eur {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="text" name="{{key}}" placeholder="DD/MM/YYYY" value="{{value}}"> <input type="text" name="{{key}}" placeholder="DD/MM/YYYY" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -97,7 +97,7 @@
{{#if typeBirthdayUs}} {{#if typeBirthdayUs}}
<div class="form-group date fm-birthday-us {{key}}"> <div class="form-group date fm-birthday-us {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="text" name="{{key}}" placeholder="MM/DD" value="{{value}}"> <input type="text" name="{{key}}" placeholder="MM/DD" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -105,7 +105,7 @@
{{#if typeBirthdayEur}} {{#if typeBirthdayEur}}
<div class="form-group date fm-birthday-eur {{key}}"> <div class="form-group date fm-birthday-eur {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<input type="text" name="{{key}}" placeholder="DD/MM" value="{{value}}"> <input type="text" name="{{key}}" placeholder="DD/MM" value="{{value}}" {{#if required}} required {{/if}}>
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
</div> </div>
{{/if}} {{/if}}
@ -113,7 +113,7 @@
{{#if typeDropdownGrouped }} {{#if typeDropdownGrouped }}
<div class="form-group dropdown {{key}}"> <div class="form-group dropdown {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<select name="{{key}}" class="form-control"> <select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
<option value=""> <option value="">
{{#translate}}––Select ––{{/translate}} {{#translate}}––Select ––{{/translate}}
</option> </option>
@ -130,7 +130,7 @@
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
{{#each options}} {{#each options}}
<label class="label-radio"> <label class="label-radio">
<input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}}> {{name}} <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
</label> </label>
{{/each}} {{/each}}
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>
@ -143,7 +143,7 @@
<label>{{name}}</label> <label>{{name}}</label>
{{#each options}} {{#each options}}
<label class="label-checkbox"> <label class="label-checkbox">
<input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}}> {{name}} <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
</label> </label>
<small class="option-help-block form-text text-muted">{{help}}</small> <small class="option-help-block form-text text-muted">{{help}}</small>
{{/each}} {{/each}}
@ -153,7 +153,7 @@
{{#if typeDropdownEnum }} {{#if typeDropdownEnum }}
<div class="form-group dropdown {{key}}"> <div class="form-group dropdown {{key}}">
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
<select name="{{key}}" class="form-control"> <select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
<option value=""> <option value="">
–– Select –– –– Select ––
</option> </option>
@ -170,7 +170,7 @@
<label for="{{key}}">{{name}}</label> <label for="{{key}}">{{name}}</label>
{{#each options}} {{#each options}}
<label class="label-radio"> <label class="label-radio">
<input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}}> {{name}} <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
</label> </label>
{{/each}} {{/each}}
<small class="form-text text-muted">{{help}}</small> <small class="form-text text-muted">{{help}}</small>

2
server/views/subscription/partials/subscription-manage-form.hbs
View file

@ -12,7 +12,7 @@
{{> subscription_custom_fields}} {{> subscription_custom_fields}}
<button type="submit" style="position: absolute; top: -9999px; left: -9999px;">{{#translate}}updateProfile{{/translate}}</button> <button type="submit">{{#translate}}updateProfile{{/translate}}</button>
</form> </form>
<script src="/moment/moment.min.js"></script> <script src="/moment/moment.min.js"></script>

2
server/views/subscription/partials/subscription-subscribe-form.hbs
View file

@ -14,7 +14,7 @@
{{> subscription_custom_fields}} {{> subscription_custom_fields}}
<button type="submit" style="position: absolute; top: -9999px; left: -9999px;">{{#translate}}subscribeToList{{/translate}}</button> <button type="submit">{{#translate}}subscribeToList{{/translate}}</button>
</form> </form>
<script> <script>

3
server/views/subscription/web-manage.mjml.hbs
View file

@ -6,9 +6,6 @@
<mj-text> <mj-text>
{{> subscription_manage_form}}<!-- don't indent me! --> {{> subscription_manage_form}}<!-- don't indent me! -->
</mj-text> </mj-text>
<mj-button mj-class="button" href="#submit">
Update Profile
</mj-button>
<mj-text mj-class="p"> <mj-text mj-class="p">
<a href="/subscription/{{lcid}}/unsubscribe/{{cid}}">Unsubscribe</a> <a href="/subscription/{{lcid}}/unsubscribe/{{cid}}">Unsubscribe</a>
</mj-text> </mj-text>

3
server/views/subscription/web-subscribe.mjml.hbs
View file

@ -6,8 +6,5 @@
<mj-text> <mj-text>
{{> subscription_subscribe_form}}<!-- don't indent me! --> {{> subscription_subscribe_form}}<!-- don't indent me! -->
</mj-text> </mj-text>
<mj-button mj-class="button" href="#submit">
Subscribe to list
</mj-button>
</mj-column> </mj-column>
</mj-section> </mj-section>