Difference between revisions of "MediaWiki:Form.rythm"
Jump to navigation
Jump to search
(Created page with "<source lang='html'> @// field definitions @def static { class Field { String name; String label_en; String label_de; String placeholder_en; String...") |
|||
Line 52: | Line 52: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | } | ||
+ | @// formvalidation | ||
+ | @def formvalidate(Field[] fields) { | ||
+ | <style> | ||
+ | #success_message{ display: none;} | ||
+ | </style> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $('#contact_form').bootstrapValidator({ | ||
+ | // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later | ||
+ | feedbackIcons: { | ||
+ | valid: 'glyphicon glyphicon-ok', | ||
+ | invalid: 'glyphicon glyphicon-remove', | ||
+ | validating: 'glyphicon glyphicon-refresh' | ||
+ | }, | ||
+ | fields: { | ||
+ | @{ String delim="";} | ||
+ | @for (Field field:fields) { | ||
+ | @(delim)@fieldvalidate(de,field) | ||
+ | @{ delim=",";} | ||
+ | } | ||
+ | @("}") | ||
+ | @("}")) | ||
+ | .on('success.form.bv', function(e) { | ||
+ | $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... | ||
+ | $('#contact_form').data('bootstrapValidator').resetForm(); | ||
+ | |||
+ | // Prevent form submission | ||
+ | e.preventDefault(); | ||
+ | |||
+ | // Get the form instance | ||
+ | var $form = $(e.target); | ||
+ | |||
+ | // Get the BootstrapValidator instance | ||
+ | var bv = $form.data('bootstrapValidator'); | ||
+ | |||
+ | // Use Ajax to submit form data | ||
+ | $.post($form.attr('action'), $form.serialize(), function(result) { | ||
+ | console.log(result); | ||
+ | }, 'json'); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
} | } | ||
</source> | </source> |
Revision as of 14:04, 4 November 2017
@// field definitions
@def static {
class Field {
String name;
String label_en;
String label_de;
String placeholder_en;
String placeholder_de;
String icon;
int min;
public Field(String name,String label_en, String label_de, String placeholder_en,String placeholder_de, String icon, int min) {
this.name=name;
this.label_en=label_en;
this.label_de=label_de;
this.placeholder_de=placeholder_de;
this.placeholder_en=placeholder_en;
this.icon=icon;
this.min=min;
}
public Field(String name,String label_en, String label_de, String icon, int min) {
this(name,label_en,label_de,label_en,label_de,icon,min);
}
}
}
@// add a bootstrap field validation
@def fieldvalidate(boolean de,Field field) {
@(field.name): @("{")
validators: @("{")
stringLength: @("{")
min: @(field.min),
@("}"),
notEmpty: @("{")
message: '@(de?"Bitte "+field.label_de+" eingeben":"Please supply your "+field.label_en)'
@("}")
@("}")
@("}")
}
@// add a form field
@def field(boolean de,Field field) {
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">@(de?field.label_de:field.label_en)</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-@(field.icon)"></i></span>
<input name="@(field.name)" placeholder="@(de?field.placeholder_de:field.placeholder_en)" class="form-control" type="text">
</div>
</div>
</div>
}
@// formvalidation
@def formvalidate(Field[] fields) {
<style>
#success_message{ display: none;}
</style>
<script>
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
@{ String delim="";}
@for (Field field:fields) {
@(delim)@fieldvalidate(de,field)
@{ delim=",";}
}
@("}")
@("}"))
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
</script>
}