Modal Bootstrap Reusable

Question

I have a simple form which enters valid authorization numbers. Once the user enters submit, I check whether or not the auth number that was provided is valid. If it is not valid, the "Invalid Authorization Number" Modal will appear for the user. If the user does not enter a authorization number or enters white spaces, it will hit "Please enter an Authorization Number" Modal.

<!--- Invalid Authorization Number Modal --->
    <div class="modal fade" id="invalidModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="background-color:#428bca !important">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel" style="text-align:center; color:white !important">INVALID AUTH</h4>
          </div>
          <div class="modal-body" style="text-align:center;">
            You have entered an invalid Authorization Number.<br /><br />Please try again.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
<!------------> 

<!--- Please enter an Authorization Number--->  
    <div class="modal fade" id="enterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="background-color:#428bca !important">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body" style="text-align:center;">
            Please enter an Authorization Number.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
<!------------> 

My question is there a way to use just one Modal but replace the content, title, etc based on which condition it hits?

Currently, here is the code that determines which modal to use:

function myFunction() {
<!---Currently not working with white spaces, currently commented out--->
    if (document.getElementById("auth").value==""){ <!--- || (!document.getElementById("auth").match(/^\s*$/))) {--->
        $("#enterModal").modal();
        document.getElementById("AuthStatus").focus();
        return false
    }
    else{
        if (document.getElementById("auth").value!="") {
            $("#invalidModal").modal();
            document.getElementById("AuthStatus").focus();
            return false
        }
    }
}

Here is the form:

<form class="form-style-7" id="AuthStatus">
    <ul>
        <li><label for="name" name="auth">Auth Status</label> <input id="auth" maxlength="100" name="name" placeholder="Authorization Number" type="text" /> <span>Please enter a valid Authorization Number</span></li>
        <li style="display:table; margin:0 auto;">
            <div style="float:left; margin-top:-22px"><input id="cmd" onclick="myFunction()" type="submit" value="Submit" /></div>

            <div style="margin-left:15px; float:left; margin-top:-22px"><input id="clear" onclick="ClearForm()" type="button" value="Clear" /></div>
        </li>
    </ul>
</form>

Update I have tried using BootstrapDialog.show. However, it is not displaying any results. Am I missing a file? Is it not part of the Bootstrap frame work? Any assistance would be appreciated.

Here is what I did:

function myFunction() {
    var auth_value = document.getElementById("auth").value;
    var type = [BootstrapDialog.TYPE_WARNING]; 

    if (document.getElementById("auth").value==""){ <!--- || (!auth_value.match(/^\s*$/))) {--->
        /*$("#enterModal").modal();
        document.getElementById("AuthStatus").focus();
        return false*/
        BootstrapDialog.show({
            type: type,
            title: type + ': Please enter an Authorization Number',
            message: 'Please enter an Authorization Number.',
            buttons: [{
                label: 'Close.'
            }]
        }); 
    }
    else{
        if (document.getElementById("auth").value!="") {
            /*$("#invalidModal").modal();
            document.getElementById("AuthStatus").focus();
            return false*/
            BootstrapDialog.show({
            type: type,
            title: type + ': Invalid Authorization Number',
            message: 'You have entered in invalid authorization number. Re-enter the authorization number.',
            buttons: [{
                label: 'Close.'
            }]
        }); 
        }
    }
}

Answer 1

This is the easiest approach to replace content in the modal:

    if (document.getElementById("auth").value=="") {
        document.getElementById("modal-title").innerHTML = "<h4></h4>";
        document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
        $("#invalidModal").modal();
        document.getElementById("AuthStatus").focus();
        return false
    }