Skip to content

Added handling of error messages and multiple validators on element #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mreca wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added handling of error messages and multiple validators on element #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bd7c39
Handles error message show/hide
mrecabarren Jun 6, 2012
2cfc326
Support multiple validators on element
mrecabarren Jun 6, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,41 +9,54 @@
<div class="container">
<h1>Form validation test</h1>

<form id="name-form" action="#" method="POST">
<form class="form-horizontal" id="name-form" action="#" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="nombre">Non-empty test</label>
<div class="controls">
<input name="nombre" data-validator="non-empty"></input>
<span class="help-inline">Help!</span>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="contenido">Non-empty test</label>
<div class="controls">
<textarea name="contenido" data-validator="non-empty"></textarea>
<span class="help-inline">Help!</span>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="non-negative-test">Non-negative test</label>
<div class="controls">
<input name="non-negative-test" data-validator="non-negative"></input>
<span class="help-inline">Help!</span>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="non-negative-test">Non-negative test (and non-empty)</label>
<div class="controls">
<input name="non-negative-test" data-validator="non-empty non-negative"></input>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="positive-test">Positive test</label>
<div class="controls">
<input name="positive-test" data-validator="positive"></input>
<span class="help-inline">Help!</span>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="custom-test">Custom (greater than 10) test</label>
<div class="controls">
<input name="custom-test" data-validator="greater-than-ten"></input>
<span class="help-inline">Help!</span>
<span class="help-inline">Error!</span>
<p class="help-block">Help!</p>
</div>
</div>
<input type="submit" />
Expand Down
74 changes: 60 additions & 14 deletions plugin/jquery.bootstrap-validate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
var pluginName = 'validator',
/* Default options */
defaults = {
'errorMessageClass' : 'help-inline'
},

/* All validators */
Expand All @@ -23,25 +24,40 @@
return getElementValue(element).length > 0
},
'is-number' : function (element) {
try {
var intVal = parseInt(getElementValue(element), 10);
if(getElementValue(element).length > 0) {
try {
var intVal = parseInt(getElementValue(element), 10);
return true;
} catch (e) {
return false;
}
}
else {
return true;
} catch (e) {
return false;
}
},
'non-negative' : function (element) {
try {
return parseInt(getElementValue(element), 10) >= 0;
} catch (e) {
return false;
if(getElementValue(element).length > 0) {
try {
return parseInt(getElementValue(element), 10) >= 0;
} catch (e) {
return false;
}
}
else {
return true;
}
},
'positive' : function (element) {
try {
return parseInt(getElementValue(element), 10) > 0;
} catch (e) {
return false;
if(getElementValue(element).length > 0) {
try {
return parseInt(getElementValue(element), 10) > 0;
} catch (e) {
return false;
}
}
else {
return true;
}
}
};
Expand Down Expand Up @@ -69,7 +85,16 @@
/* Creates a validation handler */
function createValidator(validatorType, element) {
return function() {
return validators[validatorType](element);
var validatorArray = validatorType.split(" "),
ready = true;

$.each(validatorArray, function (index, validator) {
if(!validators[validator](element)) {
ready = false;
return false;
}
});
return ready;
}
}

Expand All @@ -86,8 +111,15 @@
that.fields.each(function (index, element) {
var e = $(element);
element.doValidation = createValidator(e.attr('data-validator'), e);

/* Hide error messages from inputs */
if(that._defaults.errorMessageClass) {
e.closest('div.control-group')
.find('.' + that._defaults.errorMessageClass)
.hide();
}
});

/* Handle the form submit action */
mainForm.submit(function () {

Expand All @@ -103,11 +135,25 @@
/* Add the "error" class to the container group */
e.closest('div.control-group')
.addClass('error');

/* Show the error message */
if(that._defaults.errorMessageClass) {
e.closest('div.control-group')
.find('.' + that._defaults.errorMessageClass)
.show();
}
}
else {
/* If validation passed, remove the error class */
e.closest('div.control-group')
.removeClass('error');

/* Hide the error message */
if(that._defaults.errorMessageClass) {
e.closest('div.control-group')
.find('.' + that._defaults.errorMessageClass)
.hide();
}
}
}
);
Expand Down