If a webpage has multiple forms they cannot have the same id’s for inputs. This causes conflicts with ss-utils applyErrors() as it uses the input’s id attr instead of the name attribute, unless it is radio or checkbox.
Scenario: If there are 2 different forms on the same page and both have an email input, the id's must be unique, but they can have the same name.
The following line should default to name attr, especially since that is what the form post uses to submit the data and the ServiceStack request maps to the request dto.
var fieldId = (!isCheck ? this.id : null) || $el.attr("name");
$el.attr("name") should probably be on the left hand side of the || and if it doesn’t exist then use the this.id. Then you probably don’t need a isCheck check in that line (isCheck is used later in the function, so you can’t get rid of the variable). So maybe something like this
Update Regarding the below (not the original question above). Just noticed you can get around this using .help-inline[data-for],.help-block[data-for] e.g. <span class="help-block" data-for="email"...
So the below isn’t a necessary change. /end update
Also, another issue… in the case where input-group has input-group-addon the <span class="help-block"></span> cannot go right after the <input.... (see here).
Instead it needs to go outside of the input-group (see this pen). So if $next or $prev are not the <span class="help-* then the code should check the parent’s next sibling. e.g. add the following else
} else {
var $pNext = $el.parent().next();
if ($pNext.hasClass("help-inline") ||
$pNext.hasClass("help-block")) {
fieldLabelMap[key] = $pNext;
}
}
Not sure if anyone would put the help-*above the parent, but it does graphically look alright. If that is the case then you would also need to check the parent’s prev, e.g. $el.parent().prev();
} else {
var $parent = $el.parent();
var $pNext = $parent.next();
if ($pNext.hasClass("help-inline") || $pNext.hasClass("help-block")) {
fieldLabelMap[key] = $pNext;
} else {
var $pPrev = $parent.prev();
if (
$pPrev.hasClass("help-inline") ||
$pPrev.hasClass("help-block")
) {
fieldLabelMap[key] = $pPrev;
}
}
}
together with the whole if statement (including the parent’s prev)
// snip
if (!bs4) {
if ($prev.hasClass("help-inline") || $prev.hasClass("help-block")) {
fieldLabelMap[key] = $prev;
} else if (
$next.hasClass("help-inline") ||
$next.hasClass("help-block")
) {
fieldLabelMap[key] = $next;
} else {
var $parent = $el.parent();
var $pNext = $parent.next();
if ($pNext.hasClass("help-inline") || $pNext.hasClass("help-block")) {
fieldLabelMap[key] = $pNext;
} else {
var $pPrev = $parent.prev();
if (
$pPrev.hasClass("help-inline") ||
$pPrev.hasClass("help-block")
) {
fieldLabelMap[key] = $pPrev;
}
}
}
}
// snip