刷新引导模式

Question

我有这个引导模式：

<div class="modal fade" id="nuovoUtente" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Aggiungi utente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formUtenti" action="#">
                <div class="form-group">
                    <label for="exampleInputEmail1">Nome</label>
                    <input type="text" class="form-control" id="aggNomeUtente" placeholder="Inserisci il nome">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Cognome</label>
                    <input type="text" class="form-control" id="aggCognomeUtente" placeholder="Inserisci il cognome">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Funzione</label>
                    <textarea class="form-control" id="aggFunzioneUtente" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">E-Mail</label>
                    <input type="email" class="form-control" id="aggMailUtente" placeholder="Inserisci la Mail">
                    <small id="emailHelp" class="form-text text-muted"><i class="fas fa-exclamation-triangle warningTriangolo"></i> Credenziale di accesso</small>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Password</label>
                    <input type="password" class="form-control" id="aggPasswordUtente" placeholder="Inserisci la Password">
                    <small id="passwordHelp" class="form-text text-muted"><i class="fas fa-exclamation-triangle warningTriangolo"></i> Credenziale di accesso</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="aggNuovoUtente" class="btn btn-primary">Salva e invia</button>
                <button type="button" class="btn btn-secondary" id="chiusuraAgg" data-dismiss="modal">Chiudi senza salvare</button>
            </div>
                </form>
        </div>
    </div>
</div>

当用户点击按钮被发送到一个 js 页面，该页面为一个 php 页面创建一个 jquery ajax...这个：

$.ajax({
        url: '../PHP/getuser.php?az=nuovoUtente',
        data: utente,
        processData: false,
        type: 'POST',
        dataType: 'json',
        contentType: false
    })
    .done(function(data){
  alert("Inserito");  
    })
    .fail(function(){
        $('.modal-body').html('Qualcosa è andato storto, prova di nuovo. Molto probabilmente esiste già un utente con le                tue credenziali');
    });

我的问题是： 如果用户输入了已经在数据库中的邮件或密码（在这种情况下，我最终使用了 .fail 方法），模式会丢失其 HTML 格式并用我在 .fail 中编写的文本填充它。 我想在关闭模式时返回 HTML 中的初始格式。我如何？ 非常感谢

Answer 1

考虑以下JSFiddle 作为解决方案。

解释： 我会将这两个部分都放入模式中并隐藏不需要的部分，并在需要时切换错误消息。

请注意，我已将您现有的 <div> 调整为具有 id 字段，例如

<div class="modal-body" id="main">

并且错误消息已添加到代码中使用

<div id="errmsg" class="modal-body" style="display: none;">