amoffat/bootstrap-application-wizard

Multiple Validation

Closed this issue · 6 comments

Is there something i'm doing wrong in my setup? I'm setting data-validate="methodname" on my input and when it calls it that method calls one of several reusable functions i've made for validation. one of those methods is validateRequired, which returns .status=false if there is no value assigned. So if i submit something with no value first the wizard pops up the message for required value ...

if i then change that value to one that will cause one of the other validation methods to fail, say the "no space" validation, it will prevent the card from moving to the next step but the popover message does not change to the new message.

My functions:
function validateRequired(el) {
if (el.val() == "") {
return {status: false, msg: "Please supply a " + el.attr("placeholder")}
}
return {status: true}
}
function validateUniqueness(endpoint, el) {
var unique = $.getJSON(endpoint + el.val() + "/");

        if (unique.success == "true") {
            return {status: false, msg: "The value you've chosen is not unique"}
        }

        return {status: true}
    }
    function validatePortalValue(el) {
        var endpoint = "{{ __SERVERSIDECODE__ }}";
        var retValue = validateRequired(el);
        if (retValue.status === true) {
            retValue = validateUniqueness(endpoint, el);
        }
        return retValue;
    }
    function validatePortalName(el) {
        var retValue = validatePortalValue(el);
        if (retValue.status === true) {
            if (hasWhiteSpace(el.val())) {
                retValue.status = false;
                retValue.msg = "The Portal Name must have no spaces.";
            }
        }
        return retValue;
    }

one final comment, the validatePortalName function is the master function that is called from the data-validate property

I'm experiencing the same problem. I assume that if the status doesn't change, the message stays the same? Did you find a solution?

This seems to be an underlying problem of the bootstrap popover. There are some ugly workarounds, but I dont' even know where to put them. Seems easier to just use the bootstrap popover directly.

Alright, I did just put a destroy at the beginning of my validation function. Easy but not very clean.

el.popover("destroy");

I have a question what was the class name when using a search box in drop down in Service Selection. I just wonder about the search box inside the drop down.