Commit 33de2ee1 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Preview commit for field validation using bootstrap-validator. Do a `make...

Preview commit for field validation using bootstrap-validator. Do a `make boostrap && grunt` after merge
parent 5859d9c7
......@@ -79,6 +79,28 @@ module.exports = function (grunt) {
}
]
},
bootstrap_validator: {
files: [
{
cwd: 'bower_components/bootstrap-validator/dist/',
src: [
'validator.min.js'
],
dest: 'js/',
expand: true,
flatten: true
},
{
cwd: 'bower_components/bootstrap-validator/dist/',
src: [
'validator.min.js'
],
dest: typo3_js,
expand: true,
flatten: true
}
]
},
jquery: {
files: [
{
......
......@@ -20,6 +20,7 @@
"bootstrap": "~3.3.6",
"jqwidgets": "*",
"tablesorter": "jquery.tablesorter#^2.25.6",
"eventEmitter": "^4.3.0"
"eventEmitter": "^4.3.0",
"bootstrap-validator": "^0.10.2"
}
}
......@@ -97,7 +97,12 @@ var QfqNS = QfqNS || {};
* @returns {*}
*/
n.Form.prototype.validate = function () {
if (this.$form.attr('novalidate')) {
// uncommented because bootstrap-validator sets novalidate="true" on form.
//if (this.$form.attr('novalidate')) {
// return true;
//}
if (document.forms[this.formId].checkValidity()) {
return true;
}
......@@ -107,6 +112,7 @@ var QfqNS = QfqNS || {};
var invalidElements = [];
for (var i = 0; i < formElementsLength; i++) {
var formElement = formElements[i];
if (!formElement.willValidate) {
......
......@@ -154,33 +154,6 @@ var QfqNS = QfqNS || {};
this.eventEmitter.emitEvent('qfqform.destroyed', n.EventEmitter.makePayload(this, null));
};
n.QfqForm.prototype.checkValidity = function () {
var isValid = this.form.validate();
if (isValid === true) {
return true;
}
var invalidFields = isValid;
this.markInvalidFields(invalidFields);
return false;
};
n.QfqForm.prototype.markInvalidFields = function (invalidFields) {
var that = this;
$.each(invalidFields, function (index, element) {
if (element.hasAttribute('name')) {
var elementName = element.getAttribute('name');
that.setValidationState(elementName, 'error');
// TODO: Make sure this is portable.
if (element.validationMessage) {
that.setHelpBlockValidationMessage(elementName, element.validationMessage);
}
}
});
};
/**
* @private
*/
......@@ -214,7 +187,9 @@ var QfqNS = QfqNS || {};
};
n.QfqForm.prototype.submit = function () {
if (!this.checkValidity()) {
if (this.form.validate() !== true) {
this.form.$form.validator();
var alert = new n.Alert("Form is incomplete.", "warning");
alert.show();
return;
......
......@@ -100,7 +100,7 @@
</div>
<form id="myForm" class="form-horizontal">
<form id="myForm" class="form-horizontal" data-toggle="validator">
<input type="hidden" name="s" value="badcaffee1234">
<div class="tab-content">
......@@ -134,7 +134,9 @@
</div>
<div class="col-md-6">
<input id="firstname" name="firstname" type="text" class="form-control">
<input id="firstname" name="firstname" type="text" class="form-control" required>
<div class="help-block with-errors"></div>
</div>
</div>
......@@ -143,7 +145,10 @@
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" name="shortname" type="text" class="form-control">
<input id="nameShort" name="shortname" type="text" class="form-control" required
data-error="Short name is required">
<div class="help-block with-errors"></div>
</div>
<div class="col-md-4">
......@@ -771,6 +776,7 @@
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment