Add client side HTML5 validation of required fields
This commit is contained in:
Lawrence Elitzer
parent
1914591f46
commit
98a7a744fc
6 changed files with 22 additions and 25 deletions
|
|
@ -663,6 +663,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
|
|||
help: fld.help,
|
||||
field: fld,
|
||||
[type.getHbsType(fld)]: true,
|
||||
required: fld.required,
|
||||
order_subscribe: fld.order_subscribe,
|
||||
order_manage: fld.order_manage
|
||||
};
|
||||
|
|
@ -689,6 +690,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
|
|||
key: opt.key,
|
||||
name: opt.name,
|
||||
help: opt.help,
|
||||
required: opt.required,
|
||||
value: isEnabled
|
||||
});
|
||||
}
|
||||
|
|
@ -704,7 +706,8 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
|
|||
key: opt.key,
|
||||
name: opt.label,
|
||||
help: opt.help,
|
||||
value: value === opt.key
|
||||
value: value === opt.key,
|
||||
required: fld.required
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
{{#if typeText}}
|
||||
<div class="form-group text {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
{{#if typeNumber}}
|
||||
<div class="form-group number {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{#if typeWebsite}}
|
||||
<div class="form-group url {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
{{#if typeLongtext}}
|
||||
<div class="form-group longtext {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
{{#if typeJson}}
|
||||
<div class="form-group json {{key}}">
|
||||
<label for="{{key}}">{{name}}</label>
|
||||
<textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{"data":"value"}">{{value}}</textarea>
|
||||
<textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{"data":"value"}" {{#if required}} required {{/if}}>{{value}}</textarea>
|
||||
<small class="form-text text-muted">{{help}}</small>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<div class="form-group checkbox">
|
||||
<label>{{name}}</label>
|
||||
<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>
|
||||
<input type="hidden" value="0" name="{{key}}">
|
||||
<small class="form-text text-muted">{{help}}</small>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
{{#if ../hasPubkey}}
|
||||
<button class="btn-download-pubkey" type="submit" form="download-pubkey">{{#translate}}downloadSignatureVerificationKey{{/translate}}</button>
|
||||
{{/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">{{help}}</small>
|
||||
</div>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
{{#if typeDateUs}}
|
||||
<div class="form-group date fm-date-us {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
{{#if typeDateEur}}
|
||||
<div class="form-group date fm-date-eur {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
{{#if typeBirthdayUs}}
|
||||
<div class="form-group date fm-birthday-us {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
{{#if typeBirthdayEur}}
|
||||
<div class="form-group date fm-birthday-eur {{key}}">
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
{{#if typeDropdownGrouped }}
|
||||
<div class="form-group dropdown {{key}}">
|
||||
<label for="{{key}}">{{name}}</label>
|
||||
<select name="{{key}}" class="form-control">
|
||||
<select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
|
||||
<option value="">
|
||||
{{#translate}}––Select ––{{/translate}}
|
||||
</option>
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<label for="{{key}}">{{name}}</label>
|
||||
{{#each options}}
|
||||
<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>
|
||||
{{/each}}
|
||||
<small class="form-text text-muted">{{help}}</small>
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
<label>{{name}}</label>
|
||||
{{#each options}}
|
||||
<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>
|
||||
<small class="option-help-block form-text text-muted">{{help}}</small>
|
||||
{{/each}}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
{{#if typeDropdownEnum }}
|
||||
<div class="form-group dropdown {{key}}">
|
||||
<label for="{{key}}">{{name}}</label>
|
||||
<select name="{{key}}" class="form-control">
|
||||
<select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
|
||||
<option value="">
|
||||
–– Select ––
|
||||
</option>
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
<label for="{{key}}">{{name}}</label>
|
||||
{{#each options}}
|
||||
<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>
|
||||
{{/each}}
|
||||
<small class="form-text text-muted">{{help}}</small>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
{{> 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>
|
||||
|
||||
<script src="/moment/moment.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
{{> 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>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,6 @@
|
|||
<mj-text>
|
||||
{{> subscription_manage_form}}<!-- don't indent me! -->
|
||||
</mj-text>
|
||||
<mj-button mj-class="button" href="#submit">
|
||||
Update Profile
|
||||
</mj-button>
|
||||
<mj-text mj-class="p">
|
||||
<a href="/subscription/{{lcid}}/unsubscribe/{{cid}}">Unsubscribe</a>
|
||||
</mj-text>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,5 @@
|
|||
<mj-text>
|
||||
{{> subscription_subscribe_form}}<!-- don't indent me! -->
|
||||
</mj-text>
|
||||
<mj-button mj-class="button" href="#submit">
|
||||
Subscribe to list
|
||||
</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue